jQuery slideDown()
演示 jQuery slideDown() 方法。
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="http://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() 方法。
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="http://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() 方法。
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="http://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> |
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
jQuery slideDown() 方法用于向下滑动元素。
| $(selector).slideDown(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
| $("#flip").click(function(){ |
| $("#panel").slideDown(); |
| }); |
jQuery slideUp() 方法用于向上滑动元素。
| $(selector).slideUp(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
| $("#flip").click(function(){ |
| $("#panel").slideUp(); |
| }); |
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
| $(selector).slideToggle(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
| $("#flip").click(function(){ |
| $("#panel").slideToggle(); |
| }); |
