为什么我的动画在恢复后变得非常慢？

Question

我有一个 jQuery 动画，它可以对容器上的“scrollLeft”进行动画处理，以产生一种“选取框”效果。

我已将其设置为当鼠标悬停在容器上时它会停止动画，而当鼠标离开时它会恢复。

$(banksContainer).mouseover(function() {
    $(banksContainer).stop(false);
});

$(banksContainer).mouseleave(function() {
    startAnimation();
});

每当我将鼠标移到动画上然后移开动画时，它都会以极慢的速度恢复，但在一分钟左右后逐渐加快。

为什么会出现这种情况以及可以解决吗？

附言。 这是所要求的 startAnimation 函数：

// recursive function - represents one cycle of the marquee
function startAnimation() {
    $(banksContainer).animate(
        { scrollLeft: scrollLeftEnd },
        35000,
        "linear",
        function() {
            $(this)[0].scrollLeft = scrollLeftHome;
            startAnimation();
        }
    );
}

Answer 1

这可能是因为当您恢复动画时，移动距离已缩短，但时间仍为 35 秒。 因为速度=距离/时间，所以速度会很慢。

我认为你应该根据剩余距离设置时间。 即 35000 * 剩余距离 / 总距离。

像这样的东西吗？

function startAnimation() {
    $(banksContainer).animate(
        { scrollLeft: scrollLeftEnd },
        35000 * this.scrollLeft() / scrollLeftEnd, //or scrollLeftHome whichever is non-zero
        "linear",
        function() {
            $(this)[0].scrollLeft = scrollLeftHome;
            startAnimation();
        }
    );
}