jQuery animate – Animationen

jQuery animate

Neben den einfachen Effekten wie hide / show, fading und sliding gibt es die Kategorie Custom unter den jQuery-Effekten. Die Animation-Funktion ist die Basis für eigene Effekte.

width, height, opacity, margin sind Eigenschaften mit einem numerischen Wert – position: relative hingegen ist eine keine Eigenschaft mit einem numerischen Wert.

Die Syntax für Animationen ist

        "swing" / "linear" ─────┐ 
                                │
                                ▼
animate (Eigenschaft, Dauer, Easing, Complete)
                        ▲                 ▲
                        │                 │
                        │       Callback bei Ablauf
    Vorgabe: 400ms   ───┘
    "slow" / "fast"

Gefordert ist nur das Objekt Eigenschaft in der Form {eigenschaft: "wert"}.

Sequentielle Animationen

Der einfachste Ansatz ist der Aufruf von jQuery animate() mit dem Element, das animiert werden soll.

<div id="aniDiv">Und ab die Post</div>
<div class="centerbuttons">
	<button id="right">Box vergrößern</button>
	<button id="text">Text animieren</button>
	<button id="colo">Transparenz</button><br>
	<button id="reset">Reset</button>
</div>

$("#right").click (function () {
	$("#aniDiv").animate ( { width: "500px"}, 1000);
});
$("#text").click (function () {
	$("#aniDiv").animate ( { fontSize: "2rem"}, 1000);
});
$("#colo").click (function () {
	$("#aniDiv").animate ( { opacity: "0.5"}, 1000, "swing");
});

$("#reset").click (function () {
	$("#aniDiv").animate ( { width: "250px"}, 200);
	$("#aniDiv").animate ( { fontSize: "1.2rem"}, 200);
	$("#aniDiv").animate ( { opacity: "1"}, 200);
});

Auch wenn die Buttons für die einzelnen Effekte schnell nacheinandern geklickt würden, würden die Effekte sequentiell – einer nach dem anderen – ablaufen.

Animate Chaining – Animationen verketten

Um mehrere Eigenschaften eines Elements gleichzeitig zu animieren, bildet animate() eine Kette (chaining).

$("#all").click (function () {
	$("#aniBox").animate ( { 
		width: "500",
		fontSize: "32",
		opacity: "0.5"
	}, 1000, "swing");
});

$("#resetAll").click (function () {
	$("#aniBox").animate ( { 
		width: "250",
		fontSize: "1.2rem",
		opacity: "1"
	}, 500, "swing");
})

Die Werte der Eigenschaften werden als px interpretiert, wenn keine Maßeinheiten angegeben werden. Alternativen sind z.B. Angaben in % oder rem.

Dabei nicht vergessen: jQuery animiert nur Eigenschaften mit numerischen Werten. Schon color: #4723ab wird erst animert, wenn jQuery UI ebenfalls installiert ist.

jQuery Callback-Funktionen und Loops

$("element").animate(
   {"Eigenschaft": "Wert"},
   Dauer, 
   Geschwindigkeit, 
   callbackFunction);

Alle Animations-Methoden von jQuery bieten eine Callback-Funktion als optionales Argument nach der Dauer bzw. Geschwindigkeit. Die Callback-Funktionen wird ausgeführt, sobald der Effekt beendet ist, und kann auch weitere Animationen starten, so dass eine Sequenz oder Kette von Animationen entsteht.

.simple {position: relative; overflow: hidden; }
.square { position: absolute; bottom: -200px; }

function loop() {
     $('.square').animate (
        {bottom: "200px"},     // Eigenschaft
        4000,                  // Dauer
        'swing',               // Geschwindigkeit
        function() {           // Callback
           loop()
        }
     );
     $('.square').css({bottom: "-200px"}); // zurück in den Anfangszustand
}
loop();

In diesem Beispiel ruft die Callback-Funktion sich selber auf, so dass die jQuery-Animation in einem Loop – einer Schleife – abläuft.

jQuery Easing für Animationen

Die Easing-Funktionen steuern die Geschwindigkeit über die Dauer der Animation. Von Haus aus kommt jQuery mit zwei Easing-Funktionen: linear (zu jedem Zeitpunkt gleich schnell) und swing (start und endet langsamer).

Für weitere Easing-Effekte in jQuery muss jQuery UI für Effekte (Effects Core) eingebunden werden.

function loopease() {
     $('.square2').animate (
          {bottom: "220px"},
          { duration: 3000,
               easing: 'easeOutBounce',
               complete: function () {
               loopease();
          }
     });
     $('.square2').css({bottom: "-200px"});
}
loopease();

jQuery Animation Chain

Die einfachen Animations-Effekte in jQuery sind oft Teil einer komplexeren Kette.

1. Aneinanderhängen von Methoden (method chaining): object.method1().method2().method3()
2. Mittels Callback-Funktionen, die am Ende eines Effekts ausgeführt werden
3. Die Methode queue() bildet eine weitere Möglichkeit, Animationen in einer Kettenreaktion durchzuführen.

Dafür hat jQuery Methoden zur Steuerung des Ablaufs.

• delay()
• dequeue()
• finish()
• queue()
• stop()