Warum verläuft meine Animation beim Aufnehmen extrem langsam?

Question

Ich habe eine JQuery -Animation, die den 'Scrollleft' auf einem Container animiert, um eine Art "Festzelt" -Effekt zu erzeugen.

Ich habe es so eingerichtet, dass der Behälter die Animation gestoppt hat, und auf dem Mausblatt wird es wieder aufgenommen.

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

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

Wann immer ich die Maus über die Animation bewege und dann von der Animation von der Animation aufgenommen wird, wird sie bei einem fortgesetzt äußerst Langsame Geschwindigkeit, nimmt aber nach einer Minute nach und nach auf.

Warum passiert das und kann es gelöst werden?

Ps. Hier ist die StartAnimation -Funktion wie angefordert:

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

Answer 1

Das liegt wahrscheinlich daran, dass sich die Entfernung zur Deckung verringert hat, aber wenn Sie die Animation wieder aufnehmen, bleibt die Zeit bei 35 Sekunden. Da Geschwindigkeit = Entfernung / Zeit, wäre es langsam.

Ich denke, Sie sollten den Zeitraum proportional zur verbleibenden Entfernung festlegen. Das wäre 35000 * Abstand verbleibend / Gesamtabstand.

Etwas wie das?

function startAnimation() {
    $(banksContainer).animate(
        { scrollLeft: scrollLeftEnd },
        35000 * this.scrollLeft() / scrollLeftEnd, //or scrollLeftHome whichever is non-zero
        "linear",
        function() {
            $(this)[0].scrollLeft = scrollLeftHome;
            startAnimation();
        }
    );
}