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>
标签：jQuery,效果,text,slideToggle,height,滑动,speed 来源： https://www.cnblogs.com/songtianfa/p/11303658.html