jQuery 停止动画

Created: October-14, 2018

在本教程中，你将学习如何使用 jQuery 停止运行动画。

jQuery `stop()` 方法

jQuery stop() 方法用于在完成之前停止当前在所选元素上运行的 jQuery 动画或效果。

stop() 可以使用以下命令给出 jQuery 方法的基本语法：

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

上述语法中的参数具有以下含义：

可选的 stopAll Boolean 参数指定是否删除排队的动画。默认值为 false ，表示只停止当前动画，队列中的其余动画将在之后运行。
可选的 goToEnd Boolean 参数指定是否立即完成当前动画。默认值是 false 。

这是一个简单的示例，它演示了实际操作中的 jQuery stop() 方法，你可以在单击按钮时启动和停止动画。

<script type="text/javascript">
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

注意： jQuery stop() 方法适用于所有 jQuery 效果，如淡入淡出，滑动，动画显示和隐藏效果以及自定义动画。

这是此方法的另一个示例，其中，如果在开始动画之后但在完成动画之前再次单击 Slide Toggle 按钮，则动画将从保存的起点开始以相反的方向开始。

<script type="text/javascript">
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

创建平滑的悬停效果

在创建动画悬停效果时，当你快速放置和移除鼠标光标时，你可能遇到的常见问题之一是多个排队动画。因为，在这种情况下 mouseenter 或 mouseleave 事件在动画完成之前快速触发。要避免此问题并创建一个漂亮而平滑的悬停效果，你可以将 stop(true, true) 添加到方法链中，如下所示：

<script type="text/javascript">
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

注意： jQuery 方法 stop(true, true) 清除所有排队的动画，并将当前动画跳转到最终值。

jQuery stop() 方法

创建平滑的悬停效果

jQuery `stop()` 方法