jQuery von Kopf bis Fuß (German Edition)

https://developer.mozilla.org/de/CSS/position .
F:
F: Warum muss die CSS-Eigenschaft
position
den Wert
absolute
,
fixed
oder
relative
haben, wenn Elemente animiert werden sollen?
A:
A: Wenn die Eigenschaft
position
ihren Standardwert (
static
) behält, können wir keine Werte für die Eigenschaften
top
,
right
,
left
oder
bottom
definieren. Wenn wir mit der Funktion
animate
arbeiten, müssen wir diese Eigenschaften aber benutzen können, was mit bei der statischen Positionierung einfach nicht funktioniert, bei den Werten
absolute
,
fixed
und
relative
dagegen schon.
F:
F: Sie haben gerade von einer Browser-Layout-Engine gesprochen. Was soll das denn bitte sein?
A:
A: Die Layout-Engine gehört zu den Kernbestandteilen eines Browsers. Sie interpretiert den HTML- und CSS-Code und sorgt dafür, dass er im Viewport (das ist meistens das Browserfenster) angezeigt wird. Die Layout-Engine für Google Chrome und Safari nennt sich webkit. In Firefox heißt die Layout-Engine Gecko und der Internet Explorer benutzt eine Layout-Engine mit dem Namen Trident.
    jQuery-Magneten
    Bringen Sie die Magneten in die richtige Reihenfolge, damit das
div#kopf
-Element anklickbar wird. Sorgen Sie dafür, dass die Variablen und Bedingungsanweisungen in der richtigen Reihenfolge stehen, so dass Sie den neunten Klick ermitteln können.
    jQuery-Magneten: Lösung
    Bringen Sie die Magneten in die richtige Reihenfolge, damit das
div#kopf
-Element anklickbar wird. Sorgen Sie dafür, dass die Variablen und Bedingungsanweisungen in der richtigen Reihenfolge stehen, so dass Sie den neunten Klick ermitteln können.

    Auf jeden Fall!
    Die übrigen Elemente folgen einem ähnlichen Muster (mit ein paar Variationen, beispielsweise im Variablennamen).
    Spitzen Sie Ihren Bleistift
    Ergänzen Sie das unten stehende jQuery-Skript, um Augen, Nase und Mund anklickbar zu machen. Wir werden die Klicks gleich um weitere Funktionen erweitern. Stellen Sie sicher, dass die Variablen und Bedingungen in der richtigen Reihenfolge stehen, so dass Sie den neunten Klick ermitteln können.
    Spitzen Sie Ihren Bleistift: Lösung
    Durch die richtige Folge von Variablen und Bedingunsblöcken sind nun auch Augen-, Nasen- und Mund-Elemente anklickbar und der neunte Klick kann ermittelt werden.

Den Blitzeffekt umsetzen
    Als Nächstes wollen wir uns um den Blitzeffekt kümmern. Werfen wir dafür noch mal einen Blick auf die Projektvorlage, bevor wir uns an die Umsetzung machen.

    Möglicherweise. Vielleicht gibt es aber einen besseren Weg.
    In Kapitel 1 haben wir uns die Effekte von jQuery bereits angesehen. Jetzt wollen wir ein bisschen mehr ins Detail gehen.

Wie animiert jQuery Elemente?
    Wenn der Browser eine Seite lädt, erhalten die visuellen Eigenschaften der Elemente bestimmte Werte. Anhand der jQuery-eigenen Effekte ändert der JS-Interpreter diese CSS-Eigenschaften und animiert die Änderungen vor Ihren Augen. Das hat aber nichts mit Zauberei zu tun ... sondern mit CSS-Eigenschaften. Es folgt ein kurzer Rückblick.

hide, show und toggle verändern die CSS-Eigenschaft display

    Der JS-Interpreter ändert den Wert der CSS-Eigenschaft
display in none
und entfernt das Element so aus der Darstellung.

    Der JS-Interpreter ändert den Wert der CSS-Eigenschaft
display
des ausgewählten Elements, so dass es sichtbar wird.

    Ist ein Element verborgen, wird es angezeigt, und umgekehrt.
    jQuery-Effekte können CSS-Eigenschaften bei Bedarf ändern. Die Änderungen sind für den Benutzer sofort sichtbar.
    Kopf-Nuss
    Bei den Funktionen
hide
,
show
und
toggle
geht es immer um die Eigenschaft
display
. Dieses Mal müssen die verschiedenen Teile des Gesichts verschoben werden, und die Blitze sollen ein- und ausgeblendet werden. Welche CSS-Eigenschaften werden Ihrer Meinung nach bei Verschiebungen, bzw. Ein- und Ausblendeffekten verändert?

Ein- und Ausblendeffekte animieren die CSS-Eigenschaft opacity

    Bei der Funktion
fadeIn
ändert der JavaScript-Interpreter den Wert der CSS-Eigenschaft
opacity
in kleinen Schritten von 0.0 bis 1.0.

    Mit der Funktion
fadeTo
können Sie das Element bis zu einem bestimmten
opacity
-Wert animieren.

    Bei der Funktion
fadeIn
ändert der JavaScript-Interpreter den Wert der CSS-Eigenschaft
opacity
in kleinen Schritten von 1.0 bis 0.0.
    Freak-Futter
    Die CSS-Funktion
opacity
funktioniert nicht in allen Browsern gleich. Glücklicherweise nimmt jQuery uns hier die Arbeit ab. Und das ist eigentlich auch schon alles, was Sie wissen müssen.

Bei den