jQuery 停止动画

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

实例

jQuery stop() 滑动

演示 jQuery 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>
  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>
  32. <body>
  34. <button id="stop">停止滑动</button>
  35. <div id="flip">点击这里，向下滑动面板</div>
  36. <div id="panel">Hello world!</div>
  38. </body>
  39. </html>

jQuery stop() 动画（带有参数）

演示 jQuery stop() 方法。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script> 
  7. $(document).ready(function(){
  8.   $("#start").click(function(){
  9.     $("div").animate({left:'100px'},5000);
  10.     $("div").animate({fontSize:'3em'},5000);
  11.   });
  13.   $("#stop").click(function(){
  14.     $("div").stop();
  15.   });
  17.   $("#stop2").click(function(){
  18.     $("div").stop(true);
  19.   });
  21.   $("#stop3").click(function(){
  22.     $("div").stop(true,true);
  23.   });
  25. });
  26. </script> 
  27. </head>
  28. <body>
  30. <button id="start">开始</button>
  31. <button id="stop">停止</button>
  32. <button id="stop2">停止所有</button>
  33. <button id="stop3">停止但要完成</button>
  34. <p><b>"开始"</b> 按钮会启动动画。</p>
  35. <p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
  36. <p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
  37. <p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 
  39. <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
  41. </body>
  42. </html>

jQuery stop() 方法

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

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

语法

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

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

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

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

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

实例

  1. $("#stop").click(function(){
  2.   $("#panel").stop();
  3. });

jQuery 效果参考手册

如需全面查阅 jQuery 效果，请访问我们的 jQuery 效果参考手册。