Question

我有一个jQuery动画，可以动画容器上的'scrollLeft'来产生一种'marquee'效果。

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

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

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

1 个答案: