jQuery - Überprüfen Sie, welche divs sichtbar sind - die Fade-Funktion erlaubt keine sofortige Überprüfung?

Question

SITUATION

Ich habe eine Reihe von divs Setup verschiedene Inhalte enthalten:

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

Ich habe auch einen NAV, der in und aus spezifischen divs von oben schwindet (entweder der belebten oder verblassen unter Verwendung Funktionen).

---

DAS PROBLEM

Ich möchte alle die divs überprüfen können, wenn sie versteckt sind, wenn das nav mit - so, dass ich ein Ereignis auslösen kann, wenn alle der divs versteckt sind.

//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 
} 

Doch dies erweist sich als schwierig sein, wie die Überprüfung auf die Verzögerung immer ein div heraus auf der Fade-Funktion beruht die div, um versteckte Aktualisierung.

Gibt es eine robuste Möglichkeit zu überprüfen, ob alle divs versteckt sind? Initialisiere den Check, wenn du auf einen Gegenstand im Navigationsbereich klickst, und berücksichtige dabei, dass jedes Div eine gewisse Zeit benötigt, um nach dem Klicken auf den Gegenstand tatsächlich ausgeblendet zu werden?

Prost.

EDIT- Ich möchte eine Lösung, die die "Check für versteckte Divs" enthält, nicht nur, wo ich es sagen sollte. Vielen Dank.

Answer 1

eine Callback-Funktion, um Ihre benutzerdefinierte Animation Methode hinzufügen, rufen Sie diesen Rückruf, zu ermöglichen, Sie können etwas anhängen, nachdem die Animation abgeschlossen ist. Ich würde davon abhängen, dass der Zustand das ist, was Sie erwarten, sobald die Animation fertig ist.

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

Answer 2

Sie können ein Ereignis zum Abschluss des Fades anhängen: wenn geliefert, in der Callback-Code für die Animation

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