码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 停止动画

时间:2016-03-30 15:04:16      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。


 

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法,不带参数:

实例

技术分享
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script> 
 6 $(document).ready(function(){
 7   $("#flip").click(function(){
 8     $("#panel").slideDown(5000);
 9   });
10   $("#stop").click(function(){
11     $("#panel").stop();
12   });
13 });
14 </script>
15  
16 <style type="text/css"> 
17 #panel,#flip
18 {
19 padding:5px;
20 text-align:center;
21 background-color:#e5eecc;
22 border:solid 1px #c3c3c3;
23 }
24 #panel
25 {
26 padding:50px;
27 display:none;
28 }
29 </style>
30 </head>
31 
32 <body>
33  
34 <button id="stop">停止滑动</button>
35 <div id="flip">点击这里,向下滑动面板</div>
36 <div id="panel">Hello world!</div>
37 
38 </body>
39 </html>
View Code

查看结果:

默认效果:

技术分享

点击滑动之后,再点停止:

技术分享

再点滑动:

技术分享


 

jQuery 停止动画

标签:

原文地址:http://www.cnblogs.com/sihuiming/p/5336970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!