jQuery效果之滑动
生活随笔
收集整理的這篇文章主要介紹了
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 參數是滑動完成后所執行的函數名稱。
例子：
-------------------------------------------------------------------- 注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 -------------------------------------------------------------------- 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>總結
以上是生活随笔為你收集整理的jQuery效果之滑动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery的淡入和淡出简单介绍
- 下一篇： jQuery遍历(1)