jQuery效果之滑动
jQuery 滑动方法有三种：slideDown()、slideUp()、slideToggle()。
jQuery slideDown() 方法用于向下滑动元素，
语法：$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery slideDown() 方法</title> 6 <style> 7 #div1{margin:0 auto; 8 width:300px; 9 height:30px; 10 background:orange; 11 text-align: center; 12 line-height:30px; 13 cursor:pointer; 14 } 15 #div2{margin:0 auto; 16 width:300px; 17 height:200px; 18 background:#BCEA5F; 19 text-align: center; 20 line-height:200px; 21 display: none; 22 } 23 </style> 24 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 25 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 26 <script type="text/javascript"> 27 $(document).ready(function(){ 28 $("#div1").click(function(){ 29 $("#div2").slideDown(1000); 30 }); 31 }); 32 </script> 33 </head> 34 <body> 35 <div id="div1">点我下滑</div> 36 <div id="div2">这是内容</div> 37 </body> 38 </html>
jQuery slideUp() 方法用于向上滑动元素。
语法：$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery slideUp() 方法</title> 6 <style> 7 #div1{margin:0 auto; 8 width:300px; 9 height:30px; 10 background:orange; 11 text-align: center; 12 line-height:30px; 13 cursor:pointer; 14 } 15 #div2{margin:0 auto; 16 width:300px; 17 height:200px; 18 background:#BCEA5F; 19 text-align: center; 20 line-height:200px; 21 } 22 </style> 23 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 24 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 25 <script type="text/javascript"> 26 $(document).ready(function(){ 27 $("#div1").click(function(){ 28 $("#div2").slideUp(1000); 29 }); 30 }); 31 </script> 32 </head> 33 <body> 34 <div id="div1">点我隐藏内容</div> 35 <div id="div2">我是内容</div> 36 </body> 37 </html>
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery slideToggle() 切换</title> 6 <style> 7 #div1{ 8 margin:0 auto; 9 width:300px; 10 height:30px; 11 background:orange; 12 text-align: center; 13 line-height:30px; 14 cursor:pointer; 15 } 16 #div2{ 17 margin:0 auto; 18 width:300px; 19 height:200px; 20 background:#BCEA5F; 21 text-align: center; 22 line-height:200px; 23 } 24 </style> 25 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 26 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 27 <script type="text/javascript"> 28 $(document).ready(function(){ 29 $("#div1").click(function(){ 30 $("#div2").slideToggle(1000); 31 }); 32 }); 33 </script> 34 </head> 35 <body> 36 <div id="div1">点我显示效果内容/隐藏内容</div> 37 <div id="div2">我是内容</div> 38 </body> 39 </html>
It works on my machine
