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>