📌  相关文章
📜  jQuery hide()方法(1)

📅  最后修改于: 2023-12-03 14:43:09.109000             🧑  作者: Mango

jQuery hide()方法

简介

hide()方法是jQuery中的一种效果函数，它用于隐藏网页中的HTML元素。当元素被隐藏后，其占用的空间不再保留，可以腾出空间给其他元素使用。

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

参数说明：

  • selector：必需，用于指定需要隐藏的元素的选择器；
  • speed：可选，动画完成时间，默认为0，即没有动画效果；
  • easing：可选，指定动画的缓动效果；
  • callback：可选，当动画完成后需要执行的函数。
例子
隐藏一个元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery hide()方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").hide();
            });
        });
    </script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>点击隐藏上面的段落</button>

</body>
</html>

效果图：

hide_demo1

带有缓慢动画的隐藏操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery hide()方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").hide(2000);
            });
        });
    </script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>点击缓慢隐藏上面的段落</button>

</body>
</html>

效果图：

hide_demo2

动画完成后执行回调函数
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery hide()方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").hide(2000,function(){
                    alert("段落已经被隐藏！");
                });
            });
        });
    </script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>点击缓慢隐藏上面的段落并弹出提示框</button>

</body>
</html>

效果图：

hide_demo3

参考链接