Остановка прослушивателя .click () до тех пор, пока fadeIn () не будет завершена в jQuery.

Question

$('#div1_button').click(function() {

    $('#div0').fadeOut(function(){          
        $('#div1').fadeIn();    
    });

});

Когда пользователь нажимает кнопку div1_, ранее выбранный div0 исчезает и div1 исчезает. Если пользователь сходит с ума и нажимает div2 до того, как div1 закончил исчезать, тогда div2 начинает исчезать и в конечном итоге div1 исчезает, ноони накладываются друг на друга до тех пор, пока div1 не исчезнет, ​​а затем не исчезнет.Как я могу остановить событие .click () до тех пор, пока кликнутый div не исчезнет.

Answer 1

Что-то вроде

var div1_bclick_inprogress = false;
$('#div1_button').click(function() {
    if (!div1_bclick_inprogress) {
        div1_bclick_inprogress = true;
        $('#div0').fadeOut(function(){          
            $('#div1').fadeIn(function(){
                 div1_bclick_inprogress = false;
            });    
        });
    }

});

но вам, возможно, придется немного поэкспериментировать с деталями

Answer 2

ИСПОЛЬЗОВАНИЕ: анимированный .. http://api.jquery.com/animated-selector/

Здесь: пример

$("#div1_button").click(function() {
    if (!$(this).parent().children().is(':animated')) {
            $('#div0').fadeOut(function(){          
                $('#div1').fadeIn();    
          });
    }
    return false;
});

Answer 3

не кажется ли вам, что лучше остановить fadeIn / fadeOut и изменить направление по запросу пользователя?

в данном случае:

$('#div1_button').click(function() {
    var state = $(this).data("state");
    $(this).data(state, !state);

    var d0 = $("#div0").stop(),
        d1 = $("#div1").stop();

    if (state) {
      d0.fadeOut(function() {          
        d1.fadeIn();    
      });
    } else {
      d0.fadeIn(function() {
        d1.fadeOut();
      });
    }
});

или что-то вроде этого

Answer 4

Вы можете остановить анимацию, используя функцию jQuery .stop ().http://api.jquery.com/stop/

$('#div1_button').click(function() {

    $('#div0').stop(true, true).fadeOut(function(){          
        $('#div1').stop(true, true).fadeIn();    
    });

});

Хотя это не совсем то, что вы просили, это определенно то, что я бы сделал.

Answer 5

div1_click_handler = function()
{
    $('#div1_button').unbind('click', div1_click_handler);

    $('#div0').fadeOut('slow', function()
    {
        $('#div1').fadeIn('slow', function()
        {
            $('#div1_button').click(div1_click_handler);                
        });
    });
});

$('#div1_button').click(div1_click_handler);

Answer 6

Используйте jQuery.data для хранения флага.Установите флаг после первого щелчка и игнорируйте щелчки, пока флаг не будет снят по окончании замирания:

$('#div1_button').click(function() {
    if ($('#div1').data('disableClick') === true) return false;

    $('#div1').data('disableClick', true);

    $('#div0').fadeOut(function(){          
        $('#div1').fadeIn(function() {
            $('#div1').data('disableClick', false);
        });    
    });
});

Answer 7

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

var noFading = true;
$('#div1_button').click(function() {
    if (noFading) {
        noFading = false;
        $('#div0').fadeOut(function(){          
            $('#div1').fadeIn(function() { noFading = true; });    
        });
    }
});