返回介绍

.stop()

发布于 2017-09-11 字数5077 浏览 783 评论 0

所属分类:特效 > 自定义

.stop( [clearQueue ] [, jumpToEnd ] )返回: jQuery

描述: 停止匹配元素当前正在运行的动画。

  • 添加的版本: 1.2.stop( [clearQueue ] [, jumpToEnd ] )

    • clearQueue
      类型: Boolean

      一个布尔值,指示是否取消以列队动画。默认 false.

    • jumpToEnd
      类型: Boolean

      一个布尔值指示是否当前动画立即完成。默认false.

  • 添加的版本: 1.7.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

    • queue
      类型: String

      停止动画队列的名称。

    • clearQueue
      类型: Boolean

      一个布尔值,指示是否取消以列队动画。默认 false.

    • jumpToEnd
      类型: Boolean

      一个布尔值指示是否当前动画立即完成。默认false.

当一个元素调用.stop(),当前正在运行的动画(如果有的话)立即停止。如果,例如,一个元素用.slideUp()隐藏的时候,调用.stop(),该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成,所以动画完成时执行的回调函数是不会被调用的。

如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。

如果提供jumpToEnd参数,并且值为true时,当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的.slideUp()为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。

从jQuery 1.7开始, 如果第一个参数是一个字符串, 那么只有该参数所表示的队列中的动画才会被停止。

当我们需要对元素做mouseentermouseleave动画时,.stop()方法明显是有效的:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt=".stop()" 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.offtrue停止全局的动画 。当这样做,所有动画方法将立即设置元素的最终状态,而不是所谓的显示效果。

例子:

Example: 点击 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="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.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>

Example: 点击 slideToggle 按钮,会开始动画。然后在动画结束前再次点击该按钮,此时,会立刻从当前位置向反方向开始动画。

<!DOCTYPE html>
<html>
<head>
  <style>.block {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.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>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!