stop()
停止匹配元素当前正在运行的动画。
.stop([clearQueue ][, jumpToEnd ])
- clearQueue(默认:
false
)类型: Boolean。一个布尔值,指示是否取消以列队动画。默认false
. - jumpToEnd(默认:
false
)类型: Boolean。一个布尔值指示是否当前动画立即完成。默认false
.
.stop([queue ][, clearQueue ][, jumpToEnd ])
- queue(默认:
false
)类型: String。停止动画队列的名称。 - clearQueue类型: Boolean。一个布尔值,指示是否取消以列队动画。默认
false
. - jumpToEnd(默认:
false
)类型: Boolean。一个布尔值指示是否当前动画立即完成。默认false
.
当一个元素调用.stop()
,当前正在运行的动画(如果有的话)立即停止。如果,例如,一个元素用.slideUp()
隐藏的时候,调用.stop()
,该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成,所以动画完成时执行的回调函数是不会被调用的。
如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()
的时候,队列中的下一个动画立即开始。如果clearQueue
参数提供true
值,那么在队列中的动画其余被删除并永远不会运行。
如果提供jumpToEnd
参数,并且值为true
时,当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的.slideUp()
为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。
从jQuery 1.7开始,如果第一个参数是一个字符串,那么只有该参数所表示的队列中的动画才会被停止。
当我们需要对元素做mouseenter
和mouseleave
动画时,.stop()
方法明显是有效的:
<div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123" /> </div>
我们可以创建一个不错的淡入效果,使用.stop(true, true)
链式调用无须排队:
$('#hoverme-stop-2').hover(function () { $(this ).find('img').stop(true, true).fadeOut(); },function () { $(this ).find('img').stop(true, true).fadeIn(); });
Toggling Animations(切换动画)
jQuery的1.7 ,用.stop()
过早地停止切换动画将触发jQuery的内部效果跟踪。在早先的版本中,如果在切换动画完成之前,调用了.stop()
方法,会导致动画状态的丢失(如果 jumpToEnd 参数是 false 的话)。此时,任何后续动画将从状态"half-way"开始执行,有时这会导致元素消失。要想观察这种行为,请参阅下面最后一个例子。
可以通过设置属性
$.fx.off
为true
停止全局的动画。当这样做,所有动画方法将立即设置元素的最终状态,而不是所谓的显示效果。
例子
点击 Go 按钮,立刻开始执行动画。然后点击 STOP 按钮,动画元素会在它所在的位置停下来。另外一种测试方法时,多次点击不同的动画按钮,此时尚未被执行的动画会被添加到动画队列中,而后再点击 STOP 按钮,则会立刻停止当前的动画,继续执行队列中的其它动画。
<!DOCTYPE html> <html> <head> <style>div { position: absolute; background-color: #abc; left: 0px; top:30px; width: 60px; height: 60px; margin: 5px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div> <script> /* Start animation */ $("#go").click(function (){ $(".block").animate({left: '+=100px'}, 2000); }); /* Stop animation when button is clicked */ $("#stop").click(function (){ $(".block").stop(); }); /* Start animation in the opposite direction */ $("#back").click(function (){ $(".block").animate({left: '-=100px'}, 2000); }); </script> </body> </html>
点击 slideToggle 按钮,会开始动画。然后在动画结束前再次点击该按钮,此时,会立刻从当前位置向反方向开始动画。
<!DOCTYPE html> <html> <head> <style>.block { background-color: #abc; border: 2px solid black; width: 200px; height: 80px; margin: 10px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <button id="toggle">slideToggle</button> <div class="block"></div> <script>var $block = $('.block'); /* Toggle a sliding animation animation */ $('#toggle').on('click',function () { $block.stop().slideToggle(1000); }); </script> </body> </html>