JQuery Kochbuch (German Edition)

-Elemente. Dabei nutzen wir
next()
und
prev()
, um unsere DOM-Collection von den

-Elemente zu den nächsten Knoten im DOM-Baum wechseln zu lassen – hier die Inhalts-Panels des Akkordeons:
$open = $accordionHeaders.next().filter(':first'),
    $open
ist eine temporäre Variable, die auf das aktuell sichtbare Panel zeigt. Wir können
.is(':visible')
hier nicht nutzen, weil wir eigentlich nur die Breite verkleinern, das Panel aber immer noch die CSS-Eigenschaft
display: block
besitzt. Also merken wir uns das aktuelle Panel über die Variable
$open
:
width = $open.outerWidth();
    Schließlich merken wir uns bei der Initialisierung noch die Breite des sichtbaren Panels, so dass wir sie korrekt animieren können.
    Es bleiben noch zwei Aufgaben:
    Initialisieren der Panel-View, wobei nur das erste Panel angezeigt wird.
Binden der Click-Handler, um die Panels anzuzeigen beziehungsweise zu verbergen.
    Um die View zu initialisieren, müssen wir alle Panels außer dem ersten verbergen. Zudem müssen wir die Breite auf Null setzen, damit die animate-Funktion die Breite aufziehen kann, anstatt das Panel einfach aufploppen zu lassen.
    Dazu nutzen wir einen Filter, der umgekehrt zur Variable
$open
arbeitet – nämlich
:not(:first)
:
$accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });
    Nachdem wir unsere Selektion mit allen Panels außer dem ersten haben, ändern wir die CSS-Eigenschaften, um sie zu initialisieren.
    Schließlich fügen wir noch den Click-Handler hinzu.
    Denken Sie daran, dass die Variable
$accordionHeaders
die
h3
-Elemente enthält. Ist nun das

angeklickt worden, das zum öffnenden Panel gehört, geschieht gar nichts.
    Da die Variable
$open
das Panel enthält, nutzen wir
.prev()
, um zum vorigen

-Element zu navigieren und zu prüfen, ob es dem aktuellen Kontext des angeklickten Elements entspricht.
    Handelt es sich beim angeklickten Element nicht um das aktuell geöffnete Panel, animieren wir die Breite des
$open
-Panels auf Null und die des angeklickten Panels auf die vorher gespeicherte Breite.
    Achten Sie auch auf die letzte Zeile des Click-Handlers:
$open = $(this).next().animate({ width : width }, { duration : speed });
    Da jQuery normalerweise jQuery zurückgibt (außer beim Auslesen eines Wertes) und wir das Panel animieren, dass jetzt angezeigt werden wird, können wir das Ergebnis der Animation gleich in der Variable
$open
ablegen und damit das letzte geöffnete Panel überschreiben.

Elemente gleichzeitig Sliden und Faden
    Wenn ein Teil der Seite verborgen ist und dem Anwender nur als Reaktion auf eine bestimmte Aktivität präsentiert wird, ist ein einfaches Show/Hide manchmal nicht genug. Wir wollen interessantere Effekte erzeugen.
    Abhängig vom Layout der Seite macht ein direkter Show/Hide-Effekt dem Anwender nicht unbedingt klar, welche Inhalte neu sind. Dies ist ein weiterer Vorteil des Sliding: Der Benutzer bekommt die Layout-Änderung besser mit.
    Wir könnten die in jQuery eingebauten Methoden mit einer Laufzeitangabe nutzen. Dies erledigt die Aufgabe fast , aber eben nur fast, denn es wird auch die Breite des Elements beeinflusst (siehe Figure 7-1 ). Wie ebenfalls schon erwähnt animiert die
show
-Methode auch Rand und Abstand eines Elements. Um das Problem also zu lösen, werden wir die
animate
-Funktion nutzen, um einen eigenen Effekt zu erzeugen.
    Lösung
    Verwenden Sie die Animations-Funktion, um sowohl die Höhe als auch die Opazität gleichzeitig umzuschalten:
$(document).ready(function () {
$('#animate').click(function () {
    $('.box').animate({ opacity: