Попытка остановить событие нажатия jQuery, пока работает анимация

Question

У меня есть слайдер контента, кроме того, я сделал кнопки «предыдущий» и «следующий».Кнопки должны нажиматься только после завершения анимации (продолжительность анимации составляет 500 мс).Я попытался решить это с помощью: анимированного селектора, но он не будет работать:

if (!$(".scrollContainer").is(':animated')) {
    $(".nextItems a").click(function() {
        $(".slideNavig").find('a.selected').removeClass('selected').parent().next().find("a").addClass('selected');
    });
}
if (!$(".scrollContainer").is(':animated')) {
    $(".prevItems a").click(function() {
        $(".slideNavig").find('a.selected').removeClass('selected').parent().prev().find("a").addClass('selected');
    });
}

Или, проще говоря, мне нужно остановить событие нажатия кнопок на 500 мсек после нажатия.Кто-нибудь может мне помочь, пожалуйста?

Answer 1

Переместите оператор if, который проверяет, анимирована ли вещь в вашем обработчике события click:

$(".nextItems a").click(function() {
    if (!$(".scrollContainer").is(':animated')) {
        $(".slideNavig").find('a.selected').removeClass('selected').parent().next().find("a").addClass('selected');
    }
});

$(".prevItems a").click(function() {
    if (!$(".scrollContainer").is(':animated')) {
        $(".slideNavig").find('a.selected').removeClass('selected').parent().prev().find("a").addClass('selected');
    }
});

Также вы можете высушить свой код, выполнив что-то вроде этого:

$(".nextItems a").click(function() {
    nextPrevItem('next');
});

$(".prevItems a").click(function() {
    nextPrevItem('prev');
});
function nextPrevItem( direction ) {
    if (!$(".scrollContainer").is(':animated')) {
        $(".slideNavig").find('a.selected').removeClass('selected')
            .parent()[ direction ]()
            .find("a").addClass('selected');
    }   
}

Answer 2

Вам нужен оператор if внутри обработчиков:

$(".nextItems a").click(function() {
    if (!$(".scrollContainer").is(':animated')) {
        $(".slideNavig").find('a.selected').removeClass('selected').parent().next().find("a").addClass('selected');
    }
});

$(".prevItems a").click(function() {
    if (!$(".scrollContainer").is(':animated')) {
        $(".slideNavig").find('a.selected').removeClass('selected').parent().prev().find("a").addClass('selected');
    }
});

Answer 3

Вы можете использовать .delay() (доступно в jQuery 1.4 и выше) или вы можете использовать .setTimeOut().

http://forum.jquery.com/topic/settimeout-15-6-2010

http://api.jquery.com/delay/