.动画无限循环

.animate infinite loop

本文关键字：无限循环 动画      更新时间：2023-09-26

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

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

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

我可以用setInterval和clearInterval轻松做到这一点，但是有没有办法通过.animate功能来实现它？

使用 .stop 方法：

http://api.jquery.com/stop/

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

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

您可以使用 .stop（） 停止动画

http://api.jquery.com/stop/

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

你可以使用 .data（） 来存储一个标志，说明你是否应该再做动画

了

http://api.jquery.com/jQuery.data/

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

如果您遇到的是动画在鼠标反复进入和离开元素时排队的效果，并在鼠标离开元素后继续重复动画几次并且没有返回 - 我会为您推荐 jquery hoverflow 插件。

http://www.2meter3.de/code/hoverFlow/

相关文章：