Stopping .click() listener until fadeIn() is finished in jQuery

Question

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

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

});

When a user clicks div1_button the previously selected div0 fades out and div1 fades in. If the user goes click crazy and clicks div2 before div1 is finished fading in then div2 begins to fade in and eventually div1 fades out, but they stack on top of each other until div1 is finished fading in then fades out. How can I stop the .click() event until the clicked div is finished fading in.

Answer 1

Something like

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

});

but you may have to experiment a bit with the details

Answer 2

You could create an external boolean value that each click value checks before fading. i.e.

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

Answer 3

Use jQuery.data to store a flag. Set the flag after the first click, and ignore clicks until the flag is unset by the fade finishing:

$('#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 4

You can stop animations by using the jQuery .stop() function. http://api.jquery.com/stop/

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

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

});

While this is not exactly what you requested, it's definitely what I would've done.

Answer 5

don't you think that is better to stop the fadeIn/fadeOut and change the direction as the user requested?

in this case:

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

or something like this

Answer 6

Use .one() to ensure that the click handler is only executed once:

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

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

});

Answer 7

USE :animated .. http://api.jquery.com/animated-selector/

Here: an example

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

Answer 8

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