您的位置：首页 > Web前端 > JQuery

jQuery效果之滑动

2019-08-12 13:29 1426 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航