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>
廣告