jQuery 实现显示与隐藏效果

最新推荐文章于 2024-07-30 09:59:07 发布

书和咖啡

最新推荐文章于 2024-07-30 09:59:07 发布

阅读量1.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ivenqin/article/details/119045809

版权

这篇博客介绍了jQuery中hide(), show()和toggle()方法来实现元素的显示与隐藏效果。hide()方法用于隐藏元素，show()方法用于显示隐藏的元素，而toggle()方法则可以在显示和隐藏之间切换。文中通过示例代码详细解释了每个方法的用法，并对比了toggle()相对于单独使用hide()和show()的优势。" 138443514,22238911,Python编程：迭代器、生成器与装饰器深度解析,"['Python', '开发语言', '数据处理', '并发编程', '性能分析']

摘要由CSDN通过智能技术生成

本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效。

hide()方法

hide() 方法用于隐藏指定的元素，与 CSS 中的 display:none 效果类似。

语法如下所示：

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

speed：可选，规定隐藏效果的速度。可选值为 slow、fast、毫秒。
easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。
callback：可选，hide() 方法执行完之后，要执行的函数。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    
     $("button").click(function(){
    
      $(".fruit").hide('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button>隐藏下面内容</button>
    <div class="fruit"> 
      <p>我喜欢的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>苹果