JQuery отключить прослушиватель событий до завершения события

Question

JQuery отключить прослушиватель событий до завершения события

0

У меня есть четыре вкладки, одна из которых активна по умолчанию. При нажатии на неактивную вкладку она расширяется, а активная - уменьшается.

Проблема заключается в том, что во время анимации кликается неактивная вкладка.

http://jsfiddle.net/wFHBR/

$(document).ready(function(){
    $('.tab').bind('click',function(){
        if(!$(this).hasClass('activetab')){
            $('.activetab').removeClass('activetab',500);
            $(this).addClass('activetab',500);
        }
    });
});

Я знаю, что вопросы об укладке анимации задаются все время, но я не могу найти решение для этого конкретного примера.

Я не хочу, чтобы анимация была остановлена, отменена или поставлена в очередь. Я просто хочу, чтобы любые клики на любой другой вкладке полностью игнорировались, если анимация все еще продолжается.

Большое спасибо!

Lewis 24 окт. 2013, в 22:56

Источник

0

почему бы не избежать этого полностью, просто создав классы с CSS-анимацией вместо анимации классов с помощью jQuery
PlantTheIdea 24 окт. 2013, в 20:14

Теги:

jquery

1 ответ

Ещё вопросы

почему бы не избежать этого полностью, просто создав классы с CSS-анимацией вместо анимации классов с помощью jQuery

Serge Seredenko · Accepted Answer · 2013-10-24T17-50-00.000Z

Добавьте глобальную переменную, чтобы указать, находитесь ли вы в состоянии анимации прямо сейчас. Установите значение true в начале обработчика click, вернитесь к false в одном из методов обратного вызова методов анимации. И проверьте его, чтобы решить, следует ли вам войти в обработчик click или нет. Я редактировал вам скрипку для примера http://jsfiddle.net/vSWdS/

 var currently = false;
$('.tab').bind('click',function(){
    if(!$(this).hasClass('activetab') && !currently){
        currently = true;
        $('.activetab').removeClass('activetab',500);
        $(this).addClass('activetab',500, "swing", function(){
            currently = false;
        });
    }
});