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的动画循环卡在第一个循环

回答

相关问题