隱藏和顯示 · jQuery

## jQuery hide() 和 show() 通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素： **實例：** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//libs.baidu.com/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> <input type="text" id="text"><br> <p>如果你點擊“隱藏” 按鈕，我將會消失。</p> <button class="hide">隱藏</button> <button class="show">顯示</button> </body> </html> ``` **語法:** ``` $(*selector*).hide(*speed,callback*); $(*selector*).show(*speed,callback*); ``` 可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。下面的例子演示了帶有 speed 參數的 hide() 方法： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); </script> </head> <body> <button>隱藏</button> <p>這是個段落，內容比較少。</p> <p>這是另外一個小段落</p> </body> </html> ``` ***** ***** ## jQuery toggle() 通過 jQuery，您可以使用 [toggle() 方法](https://www.w3cschool.cn/jquery/eff-toggle.html)來切換 hide() 和 show() 方法。顯示被隱藏的元素，并隱藏已顯示的元素： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle("slow"); }); }); </script> </head> <body> <button>隱藏/顯示</button> <p>這是一個文本段落。</p> <p>這是另外一個文本段落。</p> </body> </html> ``` ## 語法 ``` $(*selector*).toggle(*speed,easing,callback*) ``` 可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。可選的 easing 參數規定在動畫的不同點上元素的速度。默認值為 "swing"。可以取以下值： "swing" - 在開頭/結尾移動慢，在中間移動快； "linear" - 勻速移動可選的 callback 參數是 toggle() 方法完成后所執行的函數名稱。可選的 callback 參數，具有以下三點說明： 1. $(selector)選中的元素的個數為n個，則callback函數會執行n次 2. callback函數名后加括號，會立刻執行函數體，而不是等到顯示/隱藏完成后才執行 3. callback既可以是函數名，也可以是匿名函數 ### toggle() - 使用 callback 參數 ``` <!DOCTYPE html> <html> <head> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000,function(){ alert("The toggle() method is finished!"); }); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>Toggle between hide() and show()</button> </body> </html> ```