jQuery Stop 动画
在本教程中，您将学习如何使用 jQuery 停止运行动画。
jQuery stop() 方法
jQuery stop() 方法用于在完成之前停止当前在选定元素上运行的 jQuery 动画或效果。
jQuery stop() 方法的基本语法可以通过以下方式给出：
$(selector).stop(stopAll, goToEnd);
上述语法中的参数含义如下：
- 可选的 stopAll 布尔参数指定是否删除排队的动画。 默认值为
false，即只停止当前动画，队列中的其余动画将在之后运行。 - 可选的 goToEnd 布尔参数指定是否立即完成当前动画。 默认值为
false。
这是一个简单的例子，演示了实际操作中的 jQuery stop() 方法，在该方法中，您可以在单击按钮时启动和停止动画。
<script>
$(document).ready(function(){
// 开始动画
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// 停止运行动画
$(".stop-btn").click(function(){
$("img").stop();
});
// 反方向开始动画
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// 重置为默认
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>这是此方法的另一个示例，如果在启动动画后但在完成之前再次单击"滑动切换"按钮，则动画将立即从保存的起点以相反的方向开始。
<script>
$(document).ready(function(){
// 杀死并切换当前的滑动动画
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>创建平滑悬停效果
在创建动画悬停效果时，您可能面临的常见问题之一是多个排队动画，当您快速放置和移除鼠标光标时。 因为，在这种情况下，mouseenter 或 mouseleave 事件会在动画完成之前快速触发。 为了避免这个问题并创建一个漂亮平滑的悬停效果，您可以将 stop(true, true) 添加到方法链中，如下所示：
<script>
$(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) 清除所有排队的动画并将当前动画跳转到最终值。
Advertisements