使用幻灯片库(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');
    }   
}); 




});

这个代码我写的一个简单的幻灯片库我.除非我快速单击箭头按钮,否则一切正常.它将超出我设置的值(urechts和ulinks).

我尝试在.animate之前加上'stop()',但它没有帮助.希望你们能就如何解决这个问题给我一些建议.提前致谢!

Answer 1

如何添加一些条件,如下所示:

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

这样的东西会在幻灯片动画时使活动无效.

Answer 2

尝试bool在您的点击功能中添加一个确定它是否已处于过渡模式.

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




}); 

这样,您的用户必须等待转换完成再次单击.