jQuery 效果

Posted 2021-01-09 氐惆

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 效果相关的知识，希望对你有一定的参考价值。

jQuery 隐藏/显示(hide()/show()):

<!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();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

实例

语法:

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

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

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow","fast"或毫秒.

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

下面的例子演示了带有 speed 参数的hide()方法:

<!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").hide(1000);
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

实例

jQuery toggle()

通过 jQuery,可以使用toggle() 方法来切换hide()和show()方法.

显示被隐藏的元素,并隐藏已显示的元素:

<!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();
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

实例

<hr>

以上是关于jQuery 效果的主要内容，如果未能解决你的问题，请参考以下文章

几个非常实用的JQuery代码片段

几条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

jQuery 将 div 切片成动画片段

jQuery应用代码片段