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>
经验首页