jQuery von Kopf bis Fuß (German Edition)

erforderliche Funktion werfen.

    Mit nur drei Zeilen Code haben wir eine zeitgesteuerte Funktion für das erste Blitzbild erstellt. Versuchen Sie nun, die Funktionen für die anderen beiden Blitzbilder zu schreiben.
    jQuery-Magneten
    Bringen Sie die Codemagneten in die richtige Reihenfolge, um die zeitgesteuerten Funktionen für die anderen beiden Blitzelemente zu schreiben.
    jQuery-Magneten: Lösung
    Bringen Sie die Codemagneten in die richtige Reihenfolge, um die zeitgesteuerten Funktionen für die anderen beiden Blitzelemente zu schreiben.
    Es gibt keine: Dummen Fragen
    F:
F: Ist
fadeIn().fadeOut()
nicht das Gleiche wie
toggle
?
A:
A: Sehr gute Frage! Es ist nicht das Gleiche. Die
toggle
-Methode ist eine Einzelmethode, die das ausgewählte Element anzeigt oder verbirgt, je nachdem, welchen Zustand des Element gerade hat. Durch die Verkettung von
fadeIn
und
fadeOut
folgen dagegen zwei Effekte aufeinander. Dabei wird das ausgewählte Element zuerst ein- und dann gleich wieder ausgeblendet.
F:
F: Die
setTimeout
-Methode ist neu. Gehört die zu jQuery oder zu JavaScript?
A:
A: Tatsächlich stammt die
setTimeout
-Methode von JavaScript. Mit ihr können Sie verschiedene Aspekte der jQuery-Animationen steuern. Wir werden uns in den folgenden Kapitel genauer mit
setTimeout
beschäftigen, besonders in Kapitel 7 .
    Wenn Sie jetzt schon mehr darüber erfahren möchten, finden Sie eine Reihe von Informationen auf der Mozilla-Entwicklerwebsite unter https://developer.mozilla.org/en/window.setTimeout . Sollte Ihnen auch das nicht reichen, besorgen Sie sich ein Exemplar von David Flanagans hervorragendem JavaScript-Buch JavaScript: Das umfassende Referenz werk (O’Reilly, http://www.oreilly.de/catalog/jscript5ger/index.html ).
F:
F: Wenn ich den
hide
-Effekt benutze, verschwindet das Element sofort. Wie kann ich das verlangsamen?
A:
A: Um die Effekte
hide
,
show
oder
toggle
zu verlangsamen, übergeben Sie einfach einen passenden Wert in den runden Klammern. Die
hide
-Funktion aus Kapitel 1 könnte dann beispielsweise so aussehen:
$("#rahmen").hide(500);

Die Blitzfunktionen ins Skript einbauen
    Bringen Sie Ihre Skriptdatei für den Monstermacher unter Verwendung des Codes auf den neuesten Stand, den Sie in der Übung auf der vorigen Seite zusammengebastelt haben.
    Tun Sie das hier!

    Probefahrt
    Öffnen Sie die Seite in einem Browser Ihrer Wahl und vergewissern Sie sich, dass die Blitzeffekte korrekt funktionieren.
    Bis jetzt funktionieren die Klickfunktionen, und die drei Blitzbilder werden nach unterschiedlichen Intervallen ein- und ausgeblendet. Wir wollen einen Blick auf die Projektvorlage werfen, um zu sehen, was noch zu tun ist.

    Die eingebauten jQuery-Effekte sind sehr praktisch. Aber sie tun nicht alles, was wir wollen.
    Es ist wird Zeit, einen eigenen Effekt zu erstellen, mit dem die Teile des Monstergesichts seitlich verschoben werden können.

Selbstgemachte Effekte mit animate
    jQuery besitzt keine eigenen
slideRight
- oder
slideLeft
-Methoden. Aber genau die brauchen wir in dieser Projektphase. Ist unser Monstermacher-Projekt damit gestorben?
    Keine Sorge: Mit der jQuery-Methode
animate
können Sie Ihre eigenen Effekte erstellen. Sie können mit ihr Animationen programmieren, die weit mehr können als die bereits in jQuery eingebauten Methoden. Mit der
animate
-Methode können Sie beliebige CSS-Eigenschaften der ausgewählten Elemente animieren. Außerdem können Sie auf diese Weise mehrere Eigenschaften auf einmal animieren.
    Hier ein kleiner Überblick über das, was mit
animate
möglich ist.

    Kopf-Nuss
    Welche CSS-Eigenschaften werden gebraucht, um die Teile der Monstergesichter bei jedem Klick ein Stück nach links zu bewegen?

Was animiert werden kann und was nicht
    Mit der
animate
-Methode können Sie auch verschiedene Font-Eigenschaften dynamisch verändern, um verschiedene Texteffekte zu erzeugen. Außerdem können Sie mehrere CSS-Eigenschaften mit einem Aufruf von
animate
animieren, wodurch eine Reihe cooler Sachen in Ihren Web-Applikationen möglich werden.
    Allerdings hat auch die
animate
-Methode ihre Grenzen. Hinter den Kulissen muss für die Animationen eine Reihe komplexer Berechnungen durchgeführt werden (über die Sie sich glücklicherweise keine Sorgen zu machen brauchen). Dadurch können nur solche CSS-Eigenschaften animiert werden, denen Sie numerische Werte übergeben können. Kennen Sie Ihre Grenzen, aber lassen Sie Ihrer Phantasie freien Lauf. Die
animate
-Methode ist äußerst flexibel