jquery動畫運行laggy

我想創建一個閃爍的箭頭。但是，當我在不同的瀏覽器中執行這個腳本時，它的行爲非常糟糕。 IE說，它的內存不足，Chrome滯後一秒，然後表現良好，在Firefox中動畫是粘滯的。jquery動畫運行laggy

希望有人可以制定一種方法，我可以順利地使閃爍的箭頭動畫。謝謝

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)}) 
    }

來源

2010-07-16 Jigs

您正在創建一個無限循環。你故意這樣做，但其運行速度比你想象的要快得多。 complete需要函數參考。通過將回調函數添加到回調函數的名稱中，您立即調用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);

兩個版本將裙子的無限循環問題，讓回調有參考脈衝元素而不被過早引用。

來源

2010-07-16 20:13:47 jasongetsdown

哇，我真的不能要求爲更詳細的答案！ – Jigs 2010-07-16 20:45:00

哈，我希望它能起作用！ GL。 – jasongetsdown 2010-07-16 20:47:34

jasongetsdown的答案雖然在技術上是正確的，但不是很jQuery風格。它也有一個問題，如果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();

來源

2011-05-18 09:24:11

jquery動畫運行laggy

回答

相關問題