jQuery 停止动画

在本教程中,你将学习如何使用 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>

创建平滑的悬停效果

在创建动画悬停效果时,当你快速放置和移除鼠标光标时,你可能遇到的常见问题之一是多个排队动画。因为,在这种情况下 mouseentermouseleave 事件在动画完成之前快速触发。要避免此问题并创建一个漂亮而平滑的悬停效果,你可以将 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) 清除所有排队的动画,并将当前动画跳转到最终值。