Domanda

Ho un'animazione jQuery che anima il 'scrollLeft' su un contenitore per produrre una sorta di effetto 'tendone'.

L'ho impostato in modo al passaggio del mouse del contenitore si ferma l'animazione, e al passaggio del mouse congedo, si riprende.

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

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

Ogni volta che muovo il mouse sopra l'animazione poi via l'animazione, si riprende con un molto a bassa velocità, ma prende a poco a poco dopo un minuto o giù di lì.

Perché succede questo e si può essere risolto?

PS. Ecco la funzione startAnimation come richiesto:

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

Soluzione

Questo è probabilmente perché quando si riprende l'animazione, la distanza di copertura ha ridotto ma il tempo rimane a 35 secondi. Poiché la velocità = distanza / tempo, sarebbe lento.

Credo che si dovrebbe impostare il tempo proporzionale alla distanza rimanente. Sarebbe 35000 * distanza distanza rimanente / totale.

Una cosa come questa?

function startAnimation() {
    $(banksContainer).animate(
        { scrollLeft: scrollLeftEnd },
        35000 * this.scrollLeft() / scrollLeftEnd, //or scrollLeftHome whichever is non-zero
        "linear",
        function() {
            $(this)[0].scrollLeft = scrollLeftHome;
            startAnimation();
        }
    );
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top