jQuery效果之滑动
程序员文章站
2022-04-10 15:41:17
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>
上一篇： Spring-使用注解开发(十二)
下一篇： 第六周作业