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

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

• javascript
• jquery
• user-interface

• So many good answers I actually ended up going with the .stop() because I feel it would be better to have the user get what they request instead of having to wait for the animation to finish and then request again. I know it wasn't what I asked for, but thanks to everyone who replied! – bmck Commented Sep 24, 2010 at 15:36
• Thanks, thats actually a good pick considering user experience :) – Stewie Commented Sep 24, 2010 at 15:45

7 Answers 7

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

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

Here: an example

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

You can stop animations by using the jQuery .stop() function. http://api.jquery./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.

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

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

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

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