jQuery 滑動方法有三種：slideDown()、slideUp()、slideToggle()。 ...
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>
