jqurey中的效果隐藏、显示、

青旅半醒 2021-09-15 07:38 303阅读 0赞

## jQuery hide() 和 show() ##

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/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>

![70][]

**语法:**

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

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

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

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
      });
    });
    $(document).ready(function(){
      $("button").click(function(){
        $("p").show(1000);
      });
    });
    </script>
    </head>
    <body>
    <button>隐藏</button>
    <button>显示</button>
    <p>这是个段落，内容比较少。</p>
    <p>这是另外一个小段落</p>
    </body>
    </html>

![70 1][]

## jQuery toggle() ##

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/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>

**语法:**

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

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

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

对于可选的 callback 参数，有以下两点说明：

1.$(*selector*)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数；

**$(selector)** 选中的元素的个数为 n 个，则 callback 函数会执行 n 次。

对于这里，当 callback 函数加上括号时，函数立即执行，只会调用一次， 如果不加括号，元素显示或隐藏后调用函数，才会调用多次。

[70]: /images/20210813/941a605a7fc44771b07233b655625895.png
[70 1]: /images/20210813/3257d28c8bbc454aa82c046d45fd2250.png