jQuery 停止动画

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

点击上下滑动面板


实例

jQuery stop() 方法

演示 jQuery stop() 方法.

jQuery stop() 停止动画 (带参数)

演示 jQuery stop() 方法.


jQuery stop() 方法

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

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

语法:
  1. $(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数指定是否也应清除动画队列。默认值为 false,这意味着只有活动的动画才会停止,从而允许在之后执行任何排队的动画。

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

因此,默认情况下,stop() 方法会终止选定元素执行的当前动画。

以下示例演示了 stop() 方法,不带参数:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.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. <style>
  16. #panel, #flip {
  17. padding: 5px;
  18. font-size: 18px;
  19. text-align: center;
  20. background-color: #555;
  21. color: white;
  22. border: solid 1px #666;
  23. border-radius: 3px;
  24. }
  25. #panel {
  26. padding: 50px;
  27. display: none;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <button id="stop">停止滑动</button>
  33. <div id="flip">点击向下滑动</div>
  34. <div id="panel">Hello world!</div>
  35. </body>
  36. </html>

jQuery 效果参考

有关所有 jQuery 效果的完整概述,请访问本站的 jQuery 效果参考