Javascript jQuery动画循环卡在第一个循环中

我正在尝试在jQuery上制作一个简单的动画。这个想法是把一个图像移到右边，然后回到开始的地方

A制定了以下代码：

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>

但在第一次播放动画时，她会被卡住一段时间。之后，一切正常

---

我错了什么

您的代码确实存在一个奇怪的问题，我无法解释为什么会发生这种情况。尝试此解决方案，对我有效：

var position = 0;

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

---

顺便说一句，此代码最终将生成

RangeError:超出了最大调用堆栈大小，因为您有无限递归。chrome的堆栈大小约为10.4k，firefox的堆栈大小约为50.9k。这可能就足够了，但它仍然可能会在长时间使用页面时引入错误。相信我，当调试时，你会因为这个错误而恨自己。哦，谢谢！但这种动画不会永远持续下去。这只是一个“加载”，我有时会打电话给你。但我需要和动画循环。你有没有其他方法可以做到这一点？如果它不是无限的，这可能不会是一个问题，但要小心，想想堆栈大小。老实说，我对jQuery没有任何建议，我一直用CSS3制作动画。如果你感兴趣。