Question

我对jQuery .animate无限循环中断方法的解决方案很感兴趣。

$(element).mouseover(function() {
   $(this).animate({ opacity: 1 }, duration, customFunc);
}).mouseout(function() {

});

现在问题是如何打破这个循环？例如在mouseout事件中？

我可以使用setInterval和clearInterval轻松完成，但 .animate 功能可以实现吗？

Answer 1

使用.stop方法：

我假设你想立即停止当前正在运行的动画？

$(element).mouseover(function() {
   $(this).animate({ opacity: 1 }, duration, customFunc);
}).mouseout(function() {
   $(this).stop();
});

Answer 2

您可以使用.stop（）

停止动画

您可能希望使用.stop（true，true）清除队列并跳转到动画的结尾

你可以使用.data（）存储一个标志，如果你应该再动画

在再次调用动画之前在customFunc中添加IF，以检查是否应该设置动画的标志。这样你就不会因任何其他回调而重新开始。在鼠标悬停时，您应该将标志设置为再次启用。

Answer 3

如果您遇到的是一种效果，当您的鼠标进入并重复离开该元素时，动画会排队并在您的鼠标离开该元素并且未返回后反复重复动画几次 - 我会建议你的jquery hoverflow插件。