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 参考手册 - 效果")。