Question

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

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

#bird是一个绝对定位的img标记。只需查看上面的代码，就应该认为鸟会向下移动30px，然后向上移动30px，然后永远循环。事实上，这恰好发生了什么，除此之外：随着时间的推移，对象恰好发现自己越来越靠近页面的顶部。当它到达顶部时，它仍然继续上下浮动，但y偏移停止增加。你对这种奇怪的行为有什么看法？

Answer 1

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

根据mblase的建议，你可以使用jQuery的offset（）函数来存储原始偏移量，然后再次在第二个动画的回调中或者在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();

对你（或其他任何人）来说只是一个小小的提示。拨打$（） - 如$（“＃bird”） - 在资源方面有点贵。如果您发现重复调用相同的选择器，通常最好调用一次，然后将结果存储在var中，就像我在上面的示例中所做的那样。因此，不是每次重新启动动画时重新选择#bird而是重置偏移量，我们只执行一次并在此之后重复使用结果。一般来说，你可能不会注意到......但是如果你在一个循环中使用选择器那么肯定会开始加起来。

Answer 2

对我来说听起来像是一个舍入错误。您可以通过在函数的开头添加一个语句来自动将#bird移动到正确的起始位置来修复它 - 不知不觉，人们希望。

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

2 个答案: