How to manage queuing of a Jquery toggle fade animation?

Question

QUESTION

How can I prevent a jquery toggle function from running before the previous toggle animation is complete?

I have a simple script to show or hide data depending whether a checkbox is checked.

JQUERY

$('.a').hide();
$('#CB').change(function () {
    if ($(this).is(':checked')) {
        $('.b').fadeOut(100, function () {
            $('.a').fadeIn();
        });
    } else {
        $('.a').fadeOut(100, function () {
            $('.b').fadeIn();
        });
    }
});

PROBLEM

When the event is fired consecutively both elements, in this case .a and .b become visible together. I assume this is because the previous request is not completed prior to firing the function again.

CLICK FOR DEMO

Answer 1

http://jsfiddle.net/keypaul/PbS33/5/

$('.a').hide();
$('#CB').change(function () {

    if ($(this).is(":checked")) {
        $('.b').stop().fadeOut(100, function () {
            $('.a').stop().fadeIn();
        });
    } else {
        $('.a').stop().fadeOut(100, function () {
            $('.b').stop().fadeIn();
        });
    }
});

Using jquery stop()

http://api.jquery.com/stop/

Answer 2

You're right. Animations in jQuery work asynchronously so they could sometimes run at the same time.

To answer your question, I think you already answered it in your question title.

Use a queue.

Set up a flag, name it something like isFading , and when it's true when $("#CB") changes, you queue it instead.

var isFading=false;
var animationQueue = [];
$('#CB').change(function () {
  if(isFading){
    if ($(this).is(':checked')) {
      animationQueue.push(fadeOutFadeIn);
    }
    else {
      animationQueue.push(fadeInFadeOut);   
    }
  }
  else{
    if ($(this).is(':checked')) {
        fadeOutFadeIn();
    } else {
        fadeInFadeOut();
    }
  }
);


function fadeOutFadeIn(){
  isFading=true;
  //insert your fadeout fadein code here
  isFading=false;

  if(animationQueue.length > 0)
    //you're now calling the queued animation to go through
    animationQueue.splice(0,1)();
}

function fadeInFadeOut(){
  isFading=true;
  //insert your fadein fadeout code here
  isFading=false;

  if(animationQueue.length > 0)
    //you're now calling the queued animation to go through
    animationQueue.splice(0,1)();
}