Geek Answers Handbook

Pressing slides too fast (jquery)

$(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');
    }   
}); 




});

I wrote this code for a simple slide gallery that I made. Everything works fine, except when I quickly press the arrow buttons. It will exceed the values ​​set by me (urechts and ulinks).

I tried putting "stop ()" in front of .animate, but that didn't help. I hope you guys can advise me how to solve this. Thanks in advance!

+5
source share
3 answers

Try tagging boolin your click function to determine if it is already in transition mode.

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




});

Therefore, your user must wait for the transition to complete before clicking again.

+7
source

, :

$('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');
        }
    }
});

- .

+10

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');
    }   
}); 

});
+2

More articles:


All Articles