jQuery效果——显示和隐藏

最新推荐文章于 2024-10-04 06:11:34 发布

青春微凉不离殇

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量493

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/jie_liang/article/details/41481045

版权

jQuery可以通过hide()来隐藏，用show()来显示

语法：

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

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

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

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide(1000);//规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
  });
$("#show").click(function(){
  $("p").show(1000);
  });
});
</script>
</head>
<body>
<button type="button" id="hide">隐藏</button>
<button type="button" id="show">显示</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
结果：

点击按钮会出现隐藏或显示的结果

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

语法：

$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle(1000);
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

结果：