1

コンテナの「scrollLeft」をアニメーション化して、一種の「マーキー」効果を生成するjQueryアニメーションがあります。

コンテナにマウスオーバーするとアニメーションが停止し、マウスを離すと再開するように設定しました。

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

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

マウスをアニメーションの上に移動してからアニメーションから外すと、非常に遅い速度で再開しますが、1 分ほどすると徐々に速度が上がります。

この問題はなぜ発生し、解決できるのでしょうか?

PS。要求された startAnimation 関数は次のとおりです。

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

1 に答える 1

2

これはおそらく、アニメーションを再開すると、カバーする距離は短くなりますが、時間は 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();
        }
    );
}
于 2009-08-08T07:22:45.953 に答える