Skip to main content
2 de 2
título editado

Como parar una animación jQuery?

Tengo un slider el cual está basado en una ul con imágenes dentro y mostrará las mismas cambiando el margen de la lista. Además están los típicos botones de lado (anterior/siguiente ) por si no se quiere esperar la animación.

He seteado un intervalo para que al cargar la página el slider vaya solo con un animate(), y limpiar el intervalo al clicar en uno de los botones para parar la animación. Luego con un timeout he hecho un reset para que el slider vuelva a animarse pasado los 4 segundos.

Mi problema esta que al presionar, ejemplo 2 veces uno de los botones, se limpia el intervalo pero luego el animate() se ejecuta 2 veces también y no encuentro el fallo. Es como si se seteara 2 veces el intervalo creado con el "timeout".

Dejo el código actual:

( function(){

var slider = $( '.slider' );

var slides = slider.find("li").length;

var actual = 0;

var width = 310;

var interval = setInterval( function(){
    slide( 'next' );
}, 2500 );


function slide( dir, click ){

    if ( click ){
        
        clearInterval( interval );
        clearInterval( restart );

        var restart ;
        var timer = setTimeout ( function(){
            clearTimeout(restart);
           restart = setInterval( slide, 1500, 'next' );
         }, 4000 );

     }

    ( dir === "next" ) ? actual -- : actual ++;
    if ( actual > 0 ) {
        actual = ( slides - 1 ) *  -1;
    }else if ( actual <= ( slides * -1  ) ) {
        actual = 0;
    }
    var margin = actual * width;

    slider.animate({
        marginLeft: margin
    }, 450);

}

$('.btn-slide').on('click', function () {

    var dir = $(this).data("mov");
//when the button is pressed we send "true" for the "click" argument
    slide( dir , true);
});

})();