Javascript jQuery.animate（）循环随时间产生意外的偏移量

我有以下Javascript代码（使用jQuery）：

---

#bird

是一个绝对定位的img标签。只要看一下上面的代码，你就会认为这只鸟会向下移动30px，然后再向上移动30px，然后永远循环。事实上，这正是发生的情况，除了这一点：随着时间的推移，对象碰巧发现自己越来越接近页面顶部。当它到达顶部时，仍会继续上下浮动，但y偏移停止增加。你对这种奇怪的行为有何看法？

编辑：完全重写，因为我以前的大部分答案都不正确

根据mblase的建议，可以使用jQuery的offset（）函数存储原始偏移量，然后在第二个动画的回调中或在floatUpAndDown（）的开始处再次重置元素

---

给你（或其他人）一点小费。打电话给$（）就资源而言是有点昂贵的。如果您发现重复调用同一个选择器，通常最好调用它一次，然后将结果存储在var中，就像我在上面的示例中所做的那样。因此，我们不是每次重新启动动画并重置偏移量时都重新选择

#bird

，而是执行一次，然后重新使用结果。一般来说，您可能不会注意到……但是如果您在循环中使用选择器，那么它肯定会开始累积。

听起来像是舍入错误。您可以通过在函数的开头添加一条语句来解决这个问题，该语句会自动将

#bird

移动到正确的起始位置，这是人们所希望的——在不知不觉中。

您也在使用jQuery UI吗？听起来像是一个舍入错误。您可以通过在函数的开头添加一条语句来修复它，该语句会自动将#bird移动到正确的起始位置，这是人们所希望的——在不知不觉中。如果您尝试{top:+=30}和{top:-=30}，这很好@hsdev，是否有其他代码影响您的bird的位置？错误。再看一次——第一个例子被显式地设置为

队列：false

。动画将在OP的情况下排队，这正是他想要的。

。animate

总是将多个调用排队；jQuery1.7只提供了禁用排队的选项。我不知道我当时在想什么。我只记得刚开始使用jQuery时有一些奇怪的行为。我已经有一段时间没有在里面使用动画引擎了。再次编辑以删除错误信息。到处道歉！

floatUpAndDown();
function floatUpAndDown() {
    $("#bird").animate({top: '+=30px'}, 1400)
              .animate({top: '-=30px'}, 1400, 'swing', floatUpAndDown);
}

var bird = $("#bird");
var birdOrgOffset = bird.offset();
function floatUpAndDown() {
    bird.offset(birdOrgOffset);
    bird.animate({top: '+=30px'}, 1400)
        .animate({top: '-=30px'}, 1400, 'swing', floatUpAndDown);
}
floatUpAndDown();