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

jQueryshow()方法

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

这是此方法使用的所有参数的描述-

  • 速度 -代表三个预定义速度(“慢”,“正常”或“快”)之一或运行动画的毫秒数(例如1000)的字符串。

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

示例

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

<html>

   <head>
      <title>The jQuery Example</title>
      <script src = "https://cdn.staticfile.org/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>

jQueryhide()方法

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

这是此方法使用的所有参数的描述-

速度 -代表三个预定义速度(“慢”,“正常”或“快”)之一或运行动画的毫秒数(例如1000)的字符串。

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

示例

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

<html>

   <head>
      <title>The jQuery Example</title>
      <script src = "https://cdn.staticfile.org/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>