jquery显示和隐藏动态效果实现

jquery show()和hide()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

  • 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实例：

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

带有 speed 参数的 hide() 方法，并使用回调函数实例

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>
</head>
<body>

<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
</body>
</html>

jquery toggle()方法

使用 toggle() 方法来切换 hide() 和 show() 方法。

语法:

$(selector).toggle(speed,callback);

  • 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

显示被隐藏的元素，并隐藏已显示的元素

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>