Hacer clic muy rápido con la galería de diapositivas (jquery)

Question

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

$('span#pijll').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear'); 
    } 
}); 




}); 

Este código lo escribí para una galería de diapositivas simple que hice. Todo funciona bien, excepto cuando hago clic rápidamente en los botones de flecha. Va más allá de los valores que configuro (urechts y ulinks).

Intenté poner 'stop()' antes del .animate, pero no sirvió. Espero que me puedan dar algunos consejos sobre cómo resolver esto. ¡Gracias por adelantado!

Answer 1

trate de poner un bool en su función de clic para determinar si ya está en el modo de transición.

var inClick = false; 

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    if(inClick) return; 

    inClick = true; 

    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear', function() { inClick = false; }); 
    } 
    else inClick = false; 
}); 

$('span#pijll').click(function(e) { 
    if(inClick) return; 

    inClick = true; 

    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear', function() { inClick = false; }); 
    }  
    else inClick = false; 
}); 




}); 

De esta forma su usuario debe esperar a que la transición se complete para volver a hacer clic.

Answer 2

trate de usar stop(true,true)

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').stop(true,true).animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

$('span#pijll').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').stop(true,true).animate({'left': '+=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

}); 

Answer 3

¿Qué pasa con la adición de algunos condicional, así:

$('span#pijlr').click(function(e) { 
    if (!$('#gallcont').is(':animated')) { 
     var slide = 500; 
     var variable = $('#gallcont').css('left'); 
     var urechts = "-1000px"; 
     if(variable > urechts) { 
     $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
     } 
    } 
}); 

Algo así anulará el evento, mientras que la tapa está animando ..