Pregunta

Tengo una animación jQuery que anima el 'scrollLeft' en un recipiente para producir una especie de efecto 'carpa'.

lo tengo configurado de modo en el ratón por encima del recipiente que se detenga la animación, y en el ratón-licencia, se vuelve a sonar.

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

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

Siempre que muevo el ratón sobre la animación a continuación de la animación, se reanuda en un muy velocidad lenta, pero recoge gradualmente después de un minuto o algo así.

¿Por qué está sucediendo esto y puede resolverse?

PS. Aquí está la función startAnimation conforme a lo solicitado:

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

Solución

Eso es probablemente porque cuando se reanude la animación, la distancia a la cubierta se ha reducido, pero el tiempo sigue siendo a los 35 segundos. ya que la velocidad = distancia / tiempo, sería lento.

Creo que debería establecer el tiempo proporcional a la distancia restante. Eso sería 35000 * La distancia de la distancia restante / total.

Algo como esto?

function startAnimation() {
    $(banksContainer).animate(
        { scrollLeft: scrollLeftEnd },
        35000 * this.scrollLeft() / scrollLeftEnd, //or scrollLeftHome whichever is non-zero
        "linear",
        function() {
            $(this)[0].scrollLeft = scrollLeftHome;
            startAnimation();
        }
    );
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top