jQuery von Kopf bis Fuß (German Edition)

slide-Funktionen geht es um die Höhe

    Der JavaScript-Interpreter weist das DOM an, für die gewählten Elemente den Wert der CSS-Eigenschaft
height
auf 0 und danach den Wert der
display
-Eigenschaft auf
none
zu setzen.

    Der JavaScript-Interpreter lässt die ausgewählten Elemente erscheinen, indem die Höhe von 0 auf den im Stylesheet angegebenen Wert animiert wird.

    Der JavaScript-Interpreter überprüft, ob das Bild seine volle Höhe hat oder den Wert 0 besitzt, und verwendet dann den passenden slide-Effekt. Hat
height
den Wert 0, wird die Funktion
slideDown
benutzt; hat das Element seine volle Höhe, kommt die Funktion
slideUp
zum Einsatz.

    Die jQuery-eigenen slide-Funktionen funktionieren nur von oben nach unten. Funktionen wie
slideRight
or
slideLeft
gibt es nicht (zumindest, während wir dieses Buch schreiben). Keine Sorge, darum werden wir uns gleich kümmern ...
    In jQuery gibt es keine slideRight- oder slideLeft-Methoden.
    Spitzen Sie Ihren Bleistift
    Welche der eingebauten jQuery-Effekte können wir für die Monstermacher-Applikation benutzen? Geben Sie für jede Gruppe von Effekten an, wie sie uns helfen kann, und erklären Sie, warum Sie sich dafür oder dagegen entschieden haben.
    Effekt
Benutzbar?
Warum?
Zeigen/Verbergen
 
 
Slide-Effekte
 
 
Fade-Effekte
 
 
    Spitzen Sie Ihren Bleistift: Lösung
    Welche der eingebauten jQuery-Effekte können wir für die MonstermacherApplikation benutzen?
    Effekt
Benutzbar?
Warum?
Zeigen/Verbergen
Nein
Die Zeigen/Verbergen-Effekte helfen uns bei der Monstermacher-Applikation nicht weiter, da wir die display-Eigenschaft nicht animieren müssen.
Slide-Effekte
Nein
Knapp daneben, aber auch vorbei: Mit den Methoden slideUp und slideDown können wir zwar die Eigenschaft height animieren, wir brauchen aber etwas, mit dem wir die left-Eigenschaft verändern können.
Fade-Effekte
Ja
Mit Fade-Effekten können wir den Teil der Anforderungen erfüllen, der besagt, dass die Blitze schnell ein- und ausgeblendet werden sollen.

Die Fade-Effekte anwenden
    Die Projektvorlage besagt, dass die Blitzbilder ein- und ausgeblendet werden sollen. Das muss allerdings schnell passieren, als ob die Blitze nur kurz aufleuchten. Dafür wollen wir die Fade-Effekte etwas genauer unter die Lupe nehmen, um uns anzusehen, wie wir es richtig blitzen lassen können.

Effektmethoden miteinander verketten
    Die Blitze müssen immer wieder ein- und ausgeblendet werden. Anstatt diese Effekte separat zu schreiben, können Sie die Methoden auch miteinander verketten, was in Kapitel 4 schon kurz angesprochen wurde, als es um das Klettern im DOM-Baum ging. Mit verketteten Methoden können Sie verschiedene Aktionen nacheinander für die ausgewählten Elemente durchführen. Dadurch lassen sich die Blitzeffekte leichter und sauberer schreiben. Das wollen wir uns mal etwas genauer ansehen.

    Übung
    Schreiben Sie die Zeile jQuery-Code, mit der die unten beschriebenen Schritte durchgeführt werden können.
    Das Element
#blitz1
soll in einer Viertelsekunde eingeblendet werden.
    ________________________________________________________________
Hängen Sie der Kette einen weiteren Effekt an, der das
#blitz1
-Element in einer Viertelsekunde wieder ausblendet.
    ________________________________________________________________
    Lösung zur Übung
    Schreiben Sie die Zeile jQuery-Code, mit der die unten beschriebenen Schritte durchgeführt werden können.
    Das Element
#blitz1
soll in einer Viertelsekunde eingeblendet werden.

    Hängen Sie der Kette einen weiteren Effekt an, der das
#blitz1
-Element in einer Viertelsekunde wieder ausblendet.

Funktionen zeitgesteuert wiederholen
    Inzwischen können Sie die Blitze ein- und wieder ausblenden. Laut den Projektanforderungen sollen die Blitze aber wiederholt werden. Zwischen echten Blitzen gibt es normalerweise eine gewisse Pause, bevor es erneut zu einer Entladung kommt. Wir brauchen also eine Möglichkeit, die Blitze wiederholt aufleuchten zu lassen.
    Erinnern Sie sich noch an die vorigen Kapitel, in denen Dinge mehrmals ausgeführt werden mussten? Wie ging das? Richtig: Mit Funktionen! Die haben wir Ihnen in Kapitel 3 zuerst gezeigt, um eine wiederverwendbare click-Funktion und einen Zufallsgenerator zu erstellen. Hier können Sie Funktionen benutzen, um es blitzen zu lassen, etwas zu warten und den Vorgang nach einer bestimmten Zeit zu wiederholen. Damit sollte sich ein schicker Blitzeffekt für die Monstermacher umsetzen lassen. Lassen Sie uns einen Blick auf die