jquery对buton进行fadeIn和fadeOut

时间：2022-08-27 12:41:02

（1）对buton进行fadeIn和fadeOut

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
window.isShow = true;
$(document).ready(function(){
  $("button").click(function(){
  if (window.isShow) {
  $("#p2").fadeOut(1000);
  } else {
  $("#p2").fadeIn(1000);
  }
  window.isShow = !window.isShow;
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</body>
</html>

等价于 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("#p2").fadeToggle(1000);
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</body>
</html>



（2）判断button是否隐藏的方法 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  if ($("#p2").is(":hidden")) { <!--判断是否隐藏-->
    $("#p2").show();
  } else {
    $("#p2").hide();
  }
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</body>
</html>



标签：

相关文章