jQuery - Check which divs are visible - fade function not allowing for immediate checking ?

Question

THE SITUATION

i have a series of divs setup to contain various content:

<div id="main">
    <div id="about"></div>
    <div id="contact"></div>
    <div id="flickr"></div>
    <div id="twitter"></div>
</div>

I also have a nav which fades in and out specific divs from above (using either the animate or fade functions).

---

THE PROBLEM

I want to be able to check when all of the divs are hidden, when using the nav - so that i can trigger an event when all of the divs are hidden.

//Custom animation function.

jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
    if (this.is(":hidden")) {
     return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
    } else {
        return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
    }
};

//example nav items.

$('#toggleContact').click(function() {
    if (!$("#contact .tab").is(':animated')) {
     $('#contact .tab').fadeThenSlideToggle(); //custom animation function
    }
});

$('#toggleAbout').click(function() {
    if (!$("#about .tab").is(':animated')) {
     $('#about .tab').fadeThenSlideToggle();
    }
});

//example check to see if all divs are hidden.
if((($(":hidden", '#main').length == 3) { //3 not 4 due to delay :S
}

However, this is proving to be difficult as the check is always one div out due to the delay on the fade function updating the div to hidden.

Is there any robust way to check if all divs are hidden? Initialising the check when clicking on an item in the nav and taking into account that each div takes a certain duration to actually set to hidden once the item has been clicked?

Cheers.

EDIT- I'd like a solution that includes the 'check for hidden divs', not just where i should put it. Thanks.

Answer 1

You can attach an event to the completion of the fade:

$("#MyDiv").fade(100,function(){
    DoSomething();
});

Answer 2

Add a callback function to your custom animation method, call this callback, if supplied, in the callback code for the animation to allow you to append some stuff to do after the animation is complete. I would depend on the state being what you expect once the animation is done.

$('#toggleContact').click(function() {
    if (!$("#contact .tab").is(':animated')) {
        $('#contact .tab').fadeThenSlideToggle( function() {
              // since this is the callback, we assume that the animation
              // has hidden all but one of the tabs
              ... more stuff to do after the animation is complete ...
        });
    }
});