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

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();
        }
    );
}