如何停止动画循环答案

【问题标题】：how to stop an animation loop如何停止动画循环
【发布时间】：2011-06-13 13:59:23
【问题描述】：

下面的代码基本上是来回设置 div 的动画。然后我希望动画在悬停时停止。如果我删除这一行，它会起作用："$(".block").animate({left: '0px'}, 1, animate);"但是然后div只是动画一次，这不是我想要的。那么如何在保持 .stop() 功能的同时让动画无限循环呢？

$(function animate(){
$(".block").animate({left: '+=500px'}, 2000);
$(".block").animate({left: '0px'}, 1, animate);
});

$(".block").hover(function(){
$(".block").stop();
$(".block").animate({ width:"20%", height:"20%"}, 500 );
});

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

更新

不确定是否：

$(".block").stop( true, true );

就是你要找的。p>

第一个true 清空队列，最后一个true 跳到动画队列的末尾，有效地结束了动画。

$(".block").stop( true );

这将清除队列，但不会跳到最后。

【讨论】：

$(".block").stop(true);做同样的事情，而且很短，最后一个选项默认为 false 所以不需要。

【解决方案2】：

我想您可以尝试在 $(".block").mouseleave() 上编写另一个函数并在其中调用 animate 。这将在您的鼠标离开 div 时触发。可能您也尝试过 mouseenter 和 mouseleave 的组合。在您的情况下，它可以正常工作并在您进入 div 区域后立即停止动画，但是没有任何功能可以告诉您从它出来时要做什么。我遇到了类似的问题，我在鼠标悬停时使图像褪色......尝试上述方法效果很好。

希望这会有所帮助！

【讨论】：