jQuery von Kopf bis Fuß (German Edition)

und kann eine Menge Spaß machen.

Texteffekte

    Aufgepasst
    Die
animate
-Methode funktioniert nur mit CSS-Eigenschaften, denen Zahlen als Wert übergeben werden können.
    borders, margin, padding
element height, min-height
, und
max-height
element width, min-width,
und
max-width
font size
bottom, left, right,
und
top position
background position
letter spacing, word spacing
text indent
line height
    Die animate-Methode unter der Lupe
    Oberflächlich gesehen, funktioniert die
animate
-Methode so ähnlich wie die Methoden, mit denen Sie schon gearbeitet haben.

    Eines der mächtigsten Merkmale von
animate
ist aber seine Fähigkeit, mehrere CSS-Eigenschaften für die gewählten Elemente auf einmal zu animieren.
    Aufgepasst
    Die Werte der CSS-Eigenschaften müssen in diesem Fall nach dem DOM - Standard und nicht nach dem CSS-Standard angegeben werden.
    Kraft-Training
    Was passiert Ihrer Meinung nach hinter den Kulissen in einem Browser, der es der
animate
-Methode ermöglicht, etwas vor den Augen der Benutzer zu verändern?

animate ändert Stile nach und nach
    Die visuellen Effekte und Animationen, die Sie aus Kino und Fernsehen kennen, benutzen die Illusion von Bewegung. Effektspezialisten und Trickexperten spielen eine Reihe von Einzelbildern nacheinander in einer bestimmten Geschwindigkeit ab , um diese Illusion zu schaffen. Das ist im Prizip nichts anderes als digitales Daumenkino.
    Das Gleiche passiert im Browserfenster, nur wird hier nicht mit einer Folge einzelner Bilder gearbeitet. Stattdessen führt der JavaScript-Interpreter immer wieder eine Funktion aus, die die Stildefinitionen für das animierte Element verändert . Das Browser stellt diese Änderungen dann auf dem Bildschirm dar. Der Benutzer sieht die Illusion von Bewegung oder Veränderung eines Elements, während sich dessen Stildefinitionen verändern.
    Wenn animate ausgeführt wird, lässt der JavaScript-Interpreter im Hintergrund eine Stoppuhr für die Dauer der Animation mitlaufen.
Der JavaScript-Interpreter weist die Layout-Engine des Browsers an, die im ersten
animate
-Parameter angegebene Eigenschaft zu ändern. Die Layout-Engine des Browsers sorgt für die Darstellung der Elemente auf dem Bildschirm.
Der JavaScript-Interpreter ruft wiederholt die Funktion auf, mit der die CSS-Eigenschaft des Elements verändert wird, bis die in Schritt 1 gestartete Stoppuhr abläuft. Bei jedem Ausführen der Funktion werden die Änderungen sofort auf dem Bildschirm angezeigt.
Der Besucher sieht die Illusion von Bewegung, während der Browser die Änderungen am Element darstellt.
    Wer Macht Was?
    Ordnen Sie die verschiedenen Codeschnipsel für Animationen den passenden Beschreibungen auf der anderen Seite zu.
    $("#mein_div").animate({top: "150px"}, "slow")
Animiert die seitlichen Außenabstände aller Absätze auf einmal.
$("p").animate({
     marginLeft:"150px",
     marginRight:"150px"
});
Animiert die Eigenschaft right für
#mein_div
in einer halben Sekunde auf den Wert 0.
$("#mein_div").animate({width: "30%"}, 250)
Animiert den Buchstabenabstand für alle Absätze mit der Standardgeschwindigkeit von 400 Millisekunden.
$("#mein_div").animate({right: "0"}, 500)
Animiert gleichzeitig Innenabstände und Breite von
#mein_div
.
$("p").animate({letterSpacing:"15px"});
Erzeugt eine langsame Animation der Position von
#mein_div
anhand der CSS-Eigenschaft
top
.
$("#mein_div").animate({
     padding: "200px",
     width: "30%"
}, "slow")
Erzeugt eine schnelle Animation der Höhe aller Bilder.
$("img").animate({height: "20px"}, "fast")
Animiert die Änderungen der Breite von
#mein_div
in einer Viertelsekunde.
    Wer Macht Was? Lösung
    Ordnen Sie die verschiedenen Codeschnipsel für Animationen den passenden Beschreibungen auf der anderen Seite zu.

Von wo nach wo genau?
    Eine wichtige Sache sollten Sie nicht vergessen:
animate
verändert den aktuellen Wert der gewählten CSS-Eigenschaft zu dem Wert, der im ersten Parameter angegeben wurde. Damit Ihre selbstgebauten Animationen tun, was Sie wollen, müssen Sie genau überlegen, wie die CSS-Regeln aussehen, bevor die Animation beginnt. Im vorigen Beispiel haben wir den Wert der Eigenschaft
left
für #mein_div auf 100px gesetzt. Was auf dem Bildschirm tatsächlich passiert, hängt davon ab, welchen Wert die Eigenschaft
left
für
#mein_div
beim Aufruf von
animate hat
.

    Werden in der aktuellen CSS-Regel andere Werte benutzt, erhalten wir auch ein anderes Ergebnis.

    Alles ist relativ.
    Damit die verschiedenen Teile der Monstergesichter