jquery动画运行滞后

我正在尝试创建一个闪烁的箭头。 但是，当我在不同的浏览器中执行此脚本时，它的行为很糟糕。 IE表示内存不足，Chrome会滞后一秒然后表现不错，而在firefox中动画很粘。

希望有人可以找到一种方法，让我可以顺利地为闪烁的箭头制作动画。 谢谢

aniPointer($('#arrow')); function aniPointer(point) { point.animate({opacity: 1.0}, {duration: 300}) .animate({opacity: 0.2}, {duration: 700}) .animate({opacity: 0.2}, {duration: 300}) .animate({opacity: 1.0}, {duration: 300, complete: aniPointer(point)}) } 

Answer 1

你正在创造一个无限循环。 你故意这样做，但它的运行速度比你想象的快得多。 complete需要函数参考。 通过将parens添加到回调函数的名称，您将立即调用aniPointer并将返回值传递给complete而不是将引用传递给aniPointer本身以便稍后触发。

即便如此，这个序列真的是你想做的吗？

你在做：

 go to 1.0 over 300ms go to 0.2 over 700ms go to 0.2 over 300ms go to 1.0 over 300ms repeat 

假设你从1.0开始，这实际上是：

 wait 300ms go to 0.2 over 700ms wait 300ms go to 1.0 over 300ms repeat 

如果你正在寻找一个稳定的脉冲，你可以做这样的事情：

 function pulse($elem) { return window.setInterval(function() { $elem.animate({opacity: 0.2}, 700) .animate({opacity: 1.0}, 300); }, 1000); } 

或者，如果你故意停顿，你可以这样做：

 function pulse($elem) { return window.setInterval(function() { $elem.animate({opacity: 0.2}, 700); window.setTimeout( function() { $elem.animate({opacity: 1.0}, 300); }, 1000); }, 1600); } 

如果您愿意，返回值将允许您停止动画：

 var pulseIntervalId = pulse( $('#arrow_id') ); //some time later... window.clearInterval(pulseIntervalId); 

两个版本都会绕过无限循环问题，允许回调引用脉冲元素而不会过早调用。

Answer 2

jasongetsdown的答案虽然在技术上是正确的，但并不是jQuery-esque。 它还有一个问题，如果animate需要的时间比它应该稍长， window.setTimeout将不关心并且并行运行第二个实例，这可能会导致各种各样的问题，所以最好等待完成触发新动画之前的动画调用。

这是另一个解决方案：

 $.fn.pulse = function(lowOpacity, highOpacity) { if (isNaN(+lowOpacity)) lowOpacity = 0.2; if (isNaN(+highOpacity)) highOpacity = 1; var that = this; (this) .delay(300) .animate({opacity: lowOpacity}, 700) .delay(300) .animate({opacity: highOpacity}, 300, function() { that.pulse(lowOpacity, highOpacity); }); } 

要使用它你会做：

 $('#elem').pulse(); 

要阻止它你会做：

 $('#elem').stop().clearQueue();