javascript - .animate 无限循环

Question

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

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

});

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

我可以很容易地做到这一点setInterval，clearInterval但是有没有办法用.animate功能做到这一点？

score 4 · Accepted Answer

使用 .stop 方法：

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

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

score 1 · Accepted Answer

您可以使用 .stop() 停止动画

您可能想使用 .stop(true, true) 清除队列并跳转到动画的末尾

您可以使用 .data() 来存储是否应该再制作动画的标志

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

score 0 · Accepted Answer

如果您遇到的是当鼠标进入和离开元素时动画排队的效果，并在鼠标离开元素且未返回后继续一遍又一遍地重复动画 - 我会推荐 jquery hoverflow插件给你。

3 回答 3