JQuery Kochbuch (German Edition)

'toggle', height: 'toggle' });
    return false;
});
});
    Diskussion
    Mit der Methode
animate
können Siegenau festlegen, welche CSS-Eigenschaften wir für den Effekt animieren wollen.
    Als End-Angabe nutzen wir zudem
toggle
. So nimmt die Methode
animate
die aktuelle Höhe im initialen Zustand und bringt sie abhängig vom Ausgangswert entweder auf Null oder auf 100%.
    In unserem Beispiel ist der initiale Status der Box sichtbar. Wollen wir die Box hingegen gerade per Sliding und Fading sichtbar machen, müssen wir die
display
-Eigenschaft im Stylesheet auf
none
setzen.
    Achtung: Die Höhe muss im Stylesheet nicht auf Null gesetzt werden. Im Gegenteil – damit würde die Animationsfunktion nicht wie gewünscht funktionieren, da sie dann nur zwischen der Höhe Null (aus dem CSS) und der Höhe Null und dem Display-Style None (dem Ende von
slideUp
) wechseln würde.

Sequenzielle Effekte anwenden
    Problem
    Sie wollen einen Effekt auf ein Set mit Elementen anwenden, nachdem ein anderer Effekt für ein anderes Set mit Elementen beendet ist. Das lässt sich einfach lösen, wenn Sie nur einen anderen Effekt ausführen wollen. Soll der Effekt aber nacheinander auf eine beliebige Zahl von Elementen angewendet werden, dann kann es schwierig werden, den Code zu warten.
    Lösung
    Diese Lösung nutzt die Standard-Vorlage, die wir am Anfang dieses Kapitels vorgestellt haben. Allerdings haben wir dieses Mal mehrere Kopien des
div.box
-Elements auf der Seite. Die Lösung ist so entworfen, dass sie mit einer beliebigen Zahl von
div.box
-Elementen arbeiten kann, da das automatische Sequenzieren sich darum kümmert.
    Manueller Callback
    Die Grundlage der Lösung ist die Verwendung eines Callbacks. Das lässt sich auch nutzen, wenn sich der folgende Effekt vom aktuellen Effekt unterscheidet:
$(document).ready(function () {
var $boxes = $('.box').hide();

$('#animate').click(function () {
    $boxes.eq(0).fadeIn('slow', function () {
     $boxes.eq(1).slideDown('slow');
    });
});
});
    Automatische Sequenz
    Diese alternative Vorgehensweise, basierend auf Dave Methvins Lösung, wiederholt den Effekt sequenziell für eine beliebige Anzahl von Elementen:
$(document).ready(function () {
var $boxes = $('.box').hide(),
    div = 0;

$('#animate').click(function () {
    $($boxes[div++] || []).fadeIn('slow', arguments.callee);
});
});
    Diskussion
    Die einfache Lösung nutzt das Callback-Feature, um zur nächsten Animation in der Folge zu springen. Der Selektor, den wir nutzen, spricht die erste
div.box
an, allerdings lässt sich dies nicht skalieren, da die Lösung davon ausgeht, dass es genau zwei animierte Elemente gibt. Bei weniger Elementen gibt es Fehler. Bei mehr Elementen werden die überzähligen nicht animiert.
    Haben wir viel mehr Elemente, oder sogar eine unbekannte Zahl von Elementen, die animiert werden müssen, ist die Lösung von Dave Methvin perfekt.
    In dessen Code werden zwei Tricks genutzt. Der erste ist das Handhaben eines leeren Arrays:
$($boxes[div++] || [])
    Dieser Code erhöht den Index-Zähler. Wenn das Element nicht existiert, wird ein leeres Array an jQuery übergeben.
    Ist die Ergebnismenge leer, dann geschieht beim Ausführen einer Animation nichts. Dann übergibt jQuery auch keine DOM-Elemente an den verketteten Aufruf und es werden damit auch keine weiteren verketteten Methoden per Callback aufgerufen.
    Würden wir hingegen den folgenden Code nutzen, würde das Alert-Fenster nie angezeigt werden – für dieses Rezept ist das die Hauptzutat:
$('ausgedachtes-element').show(function () {
alert('wird nie zu sehen sein');
});
    Der zweite Trick in diesem Rezept ist das Callback-Argument:
arguments.callee
    arguments
ist in JavaScript ein Schlüsselwort, mit dem man sich auf eine lokale Variable beziehen kann, auf die alle Funktionen Zugriff haben. Das Objekt
arguments
ähnelt einem Array, besitzt aber außer
length
keine der Array-Methoden (wie
slice
) oder -Eigenschaften.
    arguments
enthält auch in der Eigenschaft
arguments.callee
eine Referenz auf die aktuell ausgeführte Funktion. Das ist für rekursive Funktionsaufrufe nützlich – was genau der Grund dafür ist, dass wir es in unserer Lösung verwenden.
    Diese Lösung arbeitet sich inkrementierend durch die jQuery-Collection
$boxes
und ruft am Ende der Animation rekursiv die Funktion auf. Dies setzt sicht fort, bis der