jQuery von Kopf bis Fuß (German Edition)

verschoben werden, müssen wir zunächst überlegen, welche aktuelle Position die einzelnen Teile haben. Außerdem müssen wir wissen, wie sich die Bilder relativ zu ihrer Position nach der letzten Änderung verschieben sollen.

Elemente absolut und relativ bewegen
    Weiter oben in diesem Kapitel haben wir die Bildstreifen für die Anzeige in ein div-Element mit der ID
#einzelbilder
verpackt. Die Eigenschaft
left
für
div#einzelbilder
hat im aktuellen Stylesheet den Wert 91px. Jetzt müssen wir überlegen, wie die Bildstreifen bewegt werden müssen, um den gewünschten Verschiebungseffekt zu erreichen.

    Denken Sie an das Beispiel mit der absoluten Animation auf der vorigen Seite.

Relative Animation = jedesmal um diesen Wert verschieben
    Bei der absoluten Animation wird ein Element auf eine absolute Position auf dem visuellen Raster verschoben. Bei einer relativen Animation bewegen Sie das Element relativ zu seiner Position beim letzten Aufruf der
animate
-Methode.
    Aber wie können wir ein Element mit der
animate
-Methode relativ bewegen?

Etwas durch die Kombination von Operatoren relativ bewegen
    Um Elemente jedesmal um eine bestimmte Distanz zu verschieben, können Sie spezielle JavaScript-Operatoren einsetzen. Diese werden als Zuweisungsoperatoren bezeichnet. Normalerweise werden sie verwendet, um Variablen Werte zuzuweisen, indem zum aktuellen Wert etwas addiert oder etwas von ihm subtrahiert wird. Das klingt aber komplexer, als es in Wirklichkeit ist.

    Die Kombinationen von Operatoren unterstützen Sie dabei, eine relative Animation zu erstellen. Damit können Sie einer Eigenschaft den aktuellen Wert plus oder minus eine bestimmte Anzahl von Pixeln zuweisen.

    Hier sehen Sie, was bei jedem Aufruf der
animate
-Methode mit
#box
passiert.

    Punkt für Punkt
    Ein paar weitere Kombinationen von Zuweisungsoperatoren:
    a
*=
5
ist die Kurzschrift-Version für »multipliziere 5 mit dem aktuellen Wert von
a
und weise das Ergebnis wieder
a
zu”.
a
/=
2
ist die Kurzschrift-Form der Anweisung »dividiere den aktuellen von
a
durch 2 und weise das Ergebnis wieder
a
zu”.
    Übung
    Schreiben Sie die Zeile jQuery-Code, mit der die folgenden beiden Schritte durchgeführt werden können.
    Bewegen Sie das
#kopf
-Element bei jedem Aufruf von
animate
um 367 Pixel nach links. Die Animation soll eine halbe Sekunde dauern.
    ____________________________________________________________
Bewegen Sie das
#kopf
-Element zurück an seine Ausgangsposition (
left:0px
). Die Animation soll eine halbe Sekunde dauern.
    ____________________________________________________________
    Lösung zur Übung
    Schreiben Sie die Zeile jQuery-Code, mit der die folgenden beiden Schritte durchgeführt werden können.
    Bewegen Sie das
#kopf
-Element bei jedem Aufruf von
animate
um 367 Pixel nach links. Die Animation soll eine halbe Sekunde dauern.
    $(“#kopf”).animate({left:“-=367px”},500);
Bewegen Sie das
#kopf
-Element zurück an seine Ausgangsposition (
left:0px
). Die Animation soll eine halbe Sekunde dauern.
    $(“#kopf”).animate({left:“0px”},500);
    Anmerkung
    Diese absolute Animation setzt die Position des Monsterkopfs wieder auf den Startwert. Es entsteht der Eindruck des »Zurückspulens«.
    Es gibt keine: Dummen Fragen
    F:
F: Manche Leute wollen beim Betrachten der Webseiten keine Animationen sehen. Was kann ich tun, damit Benutzer die Animation bei Bedarf abschalten können?
A:
A: Das ist ein guter Einwand. Animationen können stören und zu Problemen bei der Zugänglichkeit führen. Wenn Sie möchten, dass Benutzer die Animation bei Bedarf abschalten können, können Sie einen Klick-Button mit dieser Codezeile verbinden (Sie wissen schon, wie das geht):
$.fx.off = true;
    Ein weiterer nützlicher Weg zum Anhalten von Animationen ist die jQuery-Methode
stop
. Sie finden weitere Informationen daüber auf der jQuery-Website unter
    http://api.jquery.com/jQuery.fx.off/http://api.jquery.com/stop/
F:
F: Sie haben gesagt: »Die Werte der CSS-Eigenschaften müssen in diesem Fall nach dem DOM-Standard und nicht nach dem CSS-Standard angegeben werden.« Was zum Henker ist denn damit gemeint?
A:
A: Sehr gute Frage! Sie müssen die Parameter für die
animate
-Methode nach dem DOM-Standard (bzw. in der DOM-Notation) statt in der CSS-Schreibweise angeben.
    Hier ein konkretes Beispiel, das den Unterschied erläutern soll. Um ein
div
-Element mit einem Rahmen zu versehen, könnten Sie in der CSS-Notation Folgendes schreiben:
div {
border-style: