滑動 · jQuery

## jQuery 滑動方法通過 jQuery，您可以在元素上創建滑動效果。 jQuery 擁有以下滑動方法： * slideDown() * slideUp() * slideToggle() ***** ## jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑動元素。 **語法:** ``` $(*selector*).slideDown(*speed,callback*); ``` 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。下面的例子演示了 slideDown() 方法： ``` <!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(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">點我滑下面板</div> <div id="panel">Hello world!</div> </body> </html> ``` ***** ## jQuery slideUp() 方法 jQuery slideUp() 方法用于向上滑動元素。 **語法:** ``` $(*selector*).slideUp(*speed,callback*); ``` 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。下面的例子演示了 slideUp() 方法： ``` <!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(){ $("#flip").click(function(){ $("#panel").slideUp("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; } </style> </head> <body> <div id="flip">點我拉起面板</div> <div id="panel">Hello world!</div> </body> </html> ``` ***** ## jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們。如果元素向上滑動，則 slideToggle() 可向下滑動它們。 ``` $(*selector*).slideToggle(*speed,callback*); ``` 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。下面的例子演示了 slideToggle() 方法： ``` <!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(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">點我，顯示或隱藏面板。</div> <div id="panel">Hello world!</div> </body> </html> ```