当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .stop()用法及代码示例


用法 
.stop(  [clearQueue ] [, jumpToEnd ] ) => jQuery

说明：停止匹配元素上的currently-running 动画。

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

    • clearQueue(默认：false)
      类型：Boolean
      一个布尔值，指示是否也删除排队的动画。默认为 false 。
    • jumpToEnd(默认：false)
      类型：Boolean
      一个布尔值，指示是否立即完成当前动画。默认为 false 。

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

    • queue
      类型：String
      停止动画的队列的名称。
    • clearQueue(默认：false)
      类型：Boolean
      一个布尔值，指示是否也删除排队的动画。默认为 false 。
    • jumpToEnd(默认：false)
      类型：Boolean
      一个布尔值，指示是否立即完成当前动画。默认为 false 。

在元素上调用.stop() 时，会立即停止currently-running 动画(如果有)。例如，如果在调用 .stop() 时使用 .slideUp() 隐藏元素，则该元素现在仍将显示，但将是其先前高度的一小部分。不调用回调函数。

如果在同一个元素上调用了多个动画方法，则后面的动画将放置在该元素的效果队列中。在第一个动画完成之前，这些动画不会开始。当调用.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();
});

切换动画

从 jQuery 1.7 开始，过早停止切换动画.stop()将触发 jQuery 的内部效果跟踪。在以前的版本中，调用.stop()切换动画完成之前的方法会导致动画失去对其状态的跟踪(如果 jumpToEnd 为假)。任何后续动画都将从新的 "half-way" 状态开始，有时会导致元素消失。要观察新行为，请参见下面的最后一个示例。

可以通过将属性 $.fx.off 设置为 true 来全局停止动画。完成此操作后，所有动画方法都会在调用时立即将元素设置为其最终状态，而不是显示效果。

例子：

单击 Go 按钮一次以启动动画，然后单击 STOP 按钮将其停止在当前位置。另一种选择是单击几个按钮将它们排队，然后看到停止只会杀死当前正在播放的按钮。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/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 lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  .block {
    background-color: #abc;
    border: 2px solid black;
    width: 200px;
    height: 80px;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .stop()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。