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

Question

我有一个 jQuery 动画，可以为容器上的“scrollLeft”设置动画，以产生一种“选框”效果。

我已经设置了它，因此在将鼠标悬停在容器上时它会停止动画，并且在鼠标离开时它会恢复。

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

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

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

为什么会发生这种情况，可以解决吗？

PS。这是所要求的 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();
        }
    );
}