jQuery 效果 - 滑動 · W3School Javascript & jQuery 教程

# jQuery 效果 - 滑動 **jQuery 滑動方法可使元素上下滑動。** ## 實例 [jQuery slideDown()](/tiy/t.asp?f=jquery_slide_down) 演示 jQuery slideDown() 方法。 ``` <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 領先的 Web 技術教程站點</p> <p>在 W3School，你可以找到你所需要的所有網站建設教程。</p> </div> <p class="flip">請點擊這里</p> </body> </html> ``` [jQuery slideUp()](/tiy/t.asp?f=jquery_slide_up) 演示 jQuery slideUp() 方法。 ``` <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } </style> </head> <body> <div class="panel"> <p>W3School - 領先的 Web 技術教程站點</p> <p>在 W3School，你可以找到你所需要的所有網站建設教程。</p> </div> <p class="flip">請點擊這里</p> </body> </html> ``` [jQuery slideToggle()](/tiy/t.asp?f=jquery_slide_toggle) 演示 jQuery slideToggle() 方法。 ``` <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 領先的 Web 技術教程站點</p> <p>在 W3School，你可以找到你所需要的所有網站建設教程。</p> </div> <p class="flip">請點擊這里</p> </body> </html> ``` ## jQuery 滑動方法通過 jQuery，您可以在元素上創建滑動效果。 jQuery 擁有以下滑動方法： * slideDown() * slideUp() * slideToggle() ## jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑動元素。 ### 語法： ``` $(selector).slideDown(speed,callback); ``` 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。下面的例子演示了 slideDown() 方法： ### 實例 ``` $("#flip").click(function(){ $("#panel").slideDown(); }); ``` ## jQuery slideUp() 方法 jQuery slideUp() 方法用于向上滑動元素。 ### 語法： ``` $(selector).slideUp(speed,callback); ``` 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。下面的例子演示了 slideUp() 方法： ### 實例 ``` $("#flip").click(function(){ $("#panel").slideUp(); }); ``` ## jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們。如果元素向上滑動，則 slideToggle() 可向下滑動它們。 ``` $(selector).slideToggle(speed,callback); ``` 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。下面的例子演示了 slideToggle() 方法： ### 實例 ``` $("#flip").click(function(){ $("#panel").slideToggle(); }); ``` ## jQuery 效果參考手冊如需全面查閱 jQuery 效果，請訪問我們的 [jQuery 效果參考手冊](/jquery/jquery_ref_effects.asp "jQuery 參考手冊 - 效果")。