jQuery.show() 和 jQuery.hide() 之间有什么区别?


jQuery show() 方法

show( speed, [callback] ) 方法使用流畅的动画显示所有匹配的元素,并在完成时触发可选的回调函数。

以下是此方法使用所有参数的描述:

  • speed - 一个字符串,表示三个预定义速度之一(“slow”、“normal”或“fast”),或者运行动画的毫秒数(例如 1000)。
  • callback - 这是一个可选参数,表示动画完成后要调用的函数。

示例

您可以尝试运行以下代码来学习如何使用 show() 方法。

在线演示

<html>

   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
   
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 100 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 100 );
            });
               
         });

      </script>
       
      <style>
         .mydiv {
             margin:10px;
             padding:12px;
             border:2px solid #666;
             width:100px;
             height:100px;
         }
      </style>
   </head>
   
   <body>
   
      <div class = "mydiv">
         This is a SQUARE.
      </div>

      <input id = "hide" type = "button" value = "Hide" />  
      <input id = "show" type = "button" value = "Show" />  

   </body>
   
</html>

jQuery hide() 方法

hide( speed, [callback] ) 方法使用流畅的动画隐藏所有匹配的元素,并在完成时触发可选的回调函数。

以下是此方法使用所有参数的描述:

speed - 一个字符串,表示三个预定义速度之一(“slow”、“normal”或“fast”),或者运行动画的毫秒数(例如 1000)。

callback - 这是一个可选参数,表示动画完成后要调用的函数。

示例

您可以尝试运行以下代码来学习如何使用 hide() 方法。

在线演示

<html>

   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
   
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 200 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 200 );
            });
               
         });

      </script>
       
      <style>
         .mydiv {
             margin:20px;
             padding:20px;
             border:4px solid #666;
             width:100px;
             height:100px;
         }
      </style>
   </head>
   
   <body>
   
      <div class = "mydiv">
         This is a SQUARE.
      </div>

      <input id = "hide" type = "button" value = "Hide" />  
      <input id = "show" type = "button" value = "Show" />  

   </body>
</html>

更新于:2019年12月12日

312 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告