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 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告