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




});

这样，您的用户必须等待转换完成再次点击。

Answer 3

尝试使用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');
    }   
}); 

});

使用幻灯片库（jquery）点击太快

3 个答案: