fadeToggle – die Neue in jQuery 1.4.4

Diese Woche ist jQuery in einem neuen Release erschienen. Neben einigen Bugfixes und kleinen Ändererungen gibt es auch die neue Funktion “fadeToogle”. Sie funktioniert vom Prinzip her genauso wie “toggleClass” und “slideToogle” und dient, wie die anderen, dazu möglichst einfach zwischen verschiedenen Zuständen zu wechseln. Wir wollen das an zwei Beispielen verdeutlichen.

Werfen wir vorher einen Blick auf die Signatur der neuen Methode:
.fadeToggle( [ duration ], [ easing ], [ callback ] )

Duration ist die Zeit in der das Fading ausgeführt wird
Easing ist die Art des Effektes, wobei es standardmäßig hier keine relevanten Änderungsoptionen gibt
Eine Callback Funktion um nach der Animation beliebigen Code auszuführen.

Der Javascript Code sieht nun wie folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    // Variable um aktuellen Sichtbarkeitsstatus zu speichern
    var toogleState = "visible"
 
    $(document).ready(function() {
        //Beispiel 1
        $("button:first").click(function() {
          $("div#fadingBox").fadeToggle("slow", "linear");
        });
 
        //Beispiel 2
        $("button:last").click(function () {
          $("p:first").fadeToggle("fast", function () {
 
            if(toogleState == "visible"){
                $("button:last").text("zeigen");
                toogleState = "invisible";
            }
            else{
                $("button:last").text("verstecken");
                toogleState = "visible";
            }
 
          });
        });
 
    });

Das erste Beispiel ist ein Box die einfach aus- und wieder eingeblendet wird. Ohne, dass der aktuelle Anzeigestatus sichtbar oder abrufbar wäre.

Das zweite Beispiel zeigt einen einfachen Workaround, um mit dem aktuellen Anzeigemodus zu arbeiten. Also ist das Element gerade sichtbar oder nicht. Die hier vorgestellte Variante ist einfacherer Natur. Es wäre natürlich auch möglich, direkt den Sichtbarkeitsstatus des Objektes selbst abzufragen und entsprechend zu reagieren. Die vorgestellte Möglichkeit wurde wegen der besseren Nachvollziehbarkeit so gewählt. Allerdings wäre sie für größere Projekte wegen einer schlechteren Wartbarkeit weniger zu empfehlen.

Eine Demo dazu findet ihr hier.
Weder das CSS noch das JS sind ausgelagert, also einfach rechte Maustaste und Quelltext anzeigen lassen.

Ähnliche Artikel

• 26. November 2009 -- jQuery HowTo: Traversing
• 13. März 2009 -- Selektoren in jQuery
• 1. Dezember 2010 -- jQuery Mobile – Der Seitenaufbau