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
$("element").animate( {"eigenschaft": "Wert"}, Dauer, Geschwindigkeit, callbackFunction);
jQuery Callback-Funktionen und Loops
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 animate() für komplexe Abläufe
Wird mehr als eine CSS-Eigenschaft angegeben, animiert jQuery alle Eigenschaften gleichzeitig.
$('#elem').animate ({ eigenschaft1: Wert1, eigenschaft2: Wert2, ... });
$('#slb').click(function() { if ($('#slb').html() == 'Click me') { $('.sl-content').animate( {"margin-left":"200px", "width": $('#sl-row').width - 180 + "px"}, 1000); $('.sl-menu').animate( {"height":"300px"},1000, function () { $('#slb').html('close me'); $('#slb').addClass('sl-small'); }); } else { $('.sl-content').animate( {"width":"100%", "margin-left":"0"}, 1000); $('.sl-menu').animate( {"height":"0"},1000, function() { $('#slb').html('Click me'); $('#slb').removeClass('sl-small'); } ); } });
- $('.sl-content').animate() animiert margin-left und width gleichzeitig.
- $('.sl-menu').animate() animiert height.
- Am Ende der zweiten Animation ändert die Callback-Funktion function (){} den Text im Button.
- Der else-Zweig führt die Elemente zurück in den Anfangszustand.
jQuery Animation Chain
Die einfachen Animations-Effekte in jQuery sind oft Teil einer komplexeren Kette.
- Aneinanderhängen von Methoden (method chaining): object.method1().method2().method3()
- Mittels Callback-Funktionen, die am Ende eines Effekts ausgeführt werden
- 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()