Skip to main content
título editado
Enlace

Como paraparar una animación jQuery?

Origen Enlace

Como para 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);
});

})();