Почему моя анимация идет очень медленно при возобновлении?

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