Question

我正在尝试创建一个闪烁的箭头。但是，当我在不同的浏览器中执行此脚本时，它的行为很糟糕。 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();

jquery动画运行滞后

2 个答案: