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>

轉載于:https://www.cnblogs.com/songtianfa/p/11303658.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247245.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247245.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247245.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！