jQuery的動畫循環卡在第一個循環

我想在jQuery上做一個簡單的動畫。這個想法是向右移動一個圖像，然後回到開始的位置。jQuery的動畫循環卡在第一個循環

一個做出這樣的代碼：

function logo(img) { 
    $(img).animate({ 
     left: 100 
    }, 900, function() { 
     $(img).animate({ 
      left: 0, 
     }, 900, logo(img)) 
    }) 
}

而這個HTML

<div style="position: relative; width:500px; height: 55px; overflow: visible;"> 
<img class="pena" src="https://www.google.com.br/images/srpr/logo11w.png" width="50px" style="position: absolute; left: 0px; top: 0;" onclick="logo(this);"> 
</div>

http://jsfiddle.net/rtfmu5za/1/

但是當動畫來看，她卡住了一點時間，第一次的時間。之後，一切正常。

我在做什麼？

來源

2015-01-14 Junior Neves

順便說一句，這個代碼將最終產生'的RangeError：最大調用堆棧大小exceeded'，因爲你有無限遞歸。堆棧大小約爲10.4k，Chrome需要約50.9k。這可能就夠了，但它仍然可能會導致長時間使用頁面時出現錯誤。相信我，在調試時，你會因爲這個錯誤而憎恨自己。 –

噢謝謝你！但是這個動畫不會永遠。這只是我有時會打電話的「負載」。但我需要和動畫循環。你有其他方式可以做到嗎？ –

如果它不是無限的，它可能不會是一個問題，但要小心，考慮堆棧大小。老實說，我沒有任何jQuery的建議，我總是用CSS3做我的動畫。如果您有興趣，請[閱讀更多]（http://css-tricks.com/snippets/css/keyframe-animation-syntax/）。 –

你的代碼的確存在一個奇怪的問題，我無法真正解釋爲什麼會發生這種情況。嘗試這種解決方案，爲我工作：

var position = 0; 

function logo(img) { 
    position = position == 0 ? 100 : 0; 
    $(img).animate({ 
     left: position 
    }, 900, function() { logo(this) }); 
}

http://jsfiddle.net/oqLakcbj/

來源

2015-01-14 03:16:07 ghost

它爲我工作。謝謝。 –

jQuery的動畫循環卡在第一個循環

回答

相關問題