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 参数是滑动完成后所执行的函数名称。

例子：

--------------------------------------------------------------------
注：如果你对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>

jQuery效果之滑动相关推荐

jQuery效果之滑动退出滑动显示 slideUp、slideDown
向上滑动退出函数:slideUp(3000),使用 3 秒完成向上滑动退出向下滑动显示函数:slideDown(3000),使用 3 秒完成向下滑动显示自定义动画animate 自定义动画,需要使 ...
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
jQuery 效果 - 滑动
jQuery 滑动方法可使元素上下滑动. jQuery 滑动方法通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() sli ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
jQuery效果（隐藏和显示）
jQuery效果解析隐藏和显示 hide()和show() jQuery toggle() 淡入淡出 jQuery fadeIn() 方法 jQuery fadeOut() 方法 jQuery fa ...
jQuery效果-隐藏和显示
jQuery效果-隐藏和显示使用jQuery能够轻易地实现各种动画效果,包括隐藏.显示.切换.滑动等 hide()方法和show()方法通过jQuery,可以使用hide()和show()方法来隐 ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...

jQuery效果之滑动

jQuery效果之滑动相关推荐

最新文章

热门文章