Слишком быстрый щелчок по галерее слайдов (jquery) - PullRequest
Новая
       24

Слишком быстрый щелчок по галерее слайдов (jquery)

5 голосов
/ 17 января 2012 
$(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');
    }   
}); 




});

Этот код, который я написал для простой галереи слайдов, которую я сделал. Все работает хорошо, кроме случаев, когда я быстро нажимаю кнопки со стрелками Это выйдет за пределы значений, которые я установил (уречц и улинкс).

Я пытался поставить stop () перед анимацией, но это не помогло. Надеюсь, вы, ребята, можете дать мне совет, как решить эту проблему. Заранее спасибо!

Ответы [ 3 ]

9 голосов
/ 17 января 2012

Как насчет добавления некоторого условия, например: 

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

Что-то подобное аннулирует событие во время анимации слайда.

7 голосов
/ 17 января 2012

Попробуйте ввести 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;
});  




});

Таким образом, пользователь должен ждать завершения перехода, чтобы щелкнуть снова.

2 голосов
/ 17 января 2012

попробуйте использовать 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');
    }   
}); 

});
...