jQuery 停止动画

Posted 2020-07-01 司会铭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 停止动画相关的知识，希望对你有一定的参考价值。

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>