jQuery: Animationen

Die jQuery-Methode animate wird eingesetzt, um Objekte zu animieren und referenziert dabei mittels Parameter auf CSS-Eigenschaften. Die Methode animate kann mit 4 Parametern spezifiziert werden:

$(selektor).animate({eigenschaften},geschwindigkeit,easing, callback-funktion);

1. Die Animations-Eigenschaften

Die einfachste Variante, Elemente zu animieren, liegt in dem Aufruf der Methode animate ohne weitere Parameter. So wird die der Eigenschaft height einer div-Box mit animiert.

$("#box").click(function(){
    $(this).animate({height: "300px"});
});

Um mehr als ein Element und mehr als eine Eigenschaft zu animieren, werden die Parameter Komma-separiert aufgelistet. Die Einstellungen für die Geschwindigkeit und das Easing werden als zusätzliche Parameter hinter den Eigenschaften angefügt. Im Beispiel werden zwei Schaltflächen eingerichtet, um zwei Div-Boxen zu steuern. Die in Frage kommenden animierbaren Eigenschaften sind neben den Dimensionen von Elementen Randeinstellungen, Hintergrund, Position und einige Textattribute.

Eine Liste der Eigenschaften finden Sie hier: http://www.w3schools.com/jquery/eff_animate.asp,
eine überscichtliches Plugin für Easings hier: http://gsgd.co.uk/sandbox/jquery/easing/

$("#b_auf").click(function(){
    $("#box1,#box2").animate({height: "800px", width:"600px"}, 1000, "easeInBack" );
});
$("#b_zu").click(function(){
    $("#box1,#box2").animate({height: "100px", width:"300px"}, 500, "easeOutBack");
});

Soll der Animation nach der Ausführung eine Funktion angefügt werden, kann der letzte Parameter, die callback-function genutzt werden. Callback-Funktionen werden erst ausgeführt, nachdem die vorangehenden Methoden vollständig abgeschlossen wurden und sind eine perfekte Steuerungsmöglichkeit von aufeinander aufbauenden Funktionsabläufen.

$("#b_auf").click(function(){
    $("#box1,#box2").animate({height: "800px", width:"500px"}, 1000, "easeInBack",function() {
$(this).html("die Boxen sind jetzt groß");
});
});
$("#b_zu").click(function(){
    $("#box1,#box2").animate({height: "100px", width:"300px"}, 500, "easeOutBack", function() {
$(this).html("die Boxen sind jetzt klein");
});
});

2. Die Utility-Methoden für Animationen: delay, stop

Mit den Hilfsmethoden delay(duration) und stop() können innerhalb verketteter Animationen Pausen eingebaut oder angehalten werden.

Soll zwischen zwei Bewegungen eine Pause eingelegt werden, muss die Methode delay innerhalb einer Animations-Kette zwischen die beiden Animationen platziert werden. Delay wird eine Verzögerung vor der nachfolgenden Animation ausführen, die Dauer wird - wie bei Animationen - mit Millisekunden eingestellt.

$("#b_delay").click(function(){
    $("#box1").animate({height: "800px", width:"500px"}, 1000, "easeInBack",function() {
$(this).html("Box1 ist jetzt groß");
})
.delay(2000)
.animate({height: "100px", width:"300px"}, 500, "easeOutBack", function() {
$(this).html("Box1 ist jetzt klein");
});
});

Um eine Animation abzubrechen, wird die Methode stop() verwendet. Im Beispiel wird die Box2 bei jedem Klick mit der Methode animate 100px höher und 50px breiter. Um die Masse der Box nicht ins uferlose laufen zu lassen, wird die Animation gestoppt, sobald das Mass von 400px Breite überschritten wird. Dazu muss zuerst eine Variable grenze eingerichtet, in die die aktuelle Breite der Box aufgenommen wird. Mit einer Bedingung wird anschliessend der Wert festgelegt, ab dem die Animation gestoppt werden soll. Wichtig ist, dass für den Aufruf der Methoden animate, delay und stop jeweils identische Selektoren innerhalb einer Animationskette verwendet werden. Für eine Animationskette wird nämlich automatisch eine queue erzeugt, die einem Element zugeordnet wird und diese Kette wird mit der Methode stop unterbrochen.

$("#b_pause").click(function(){
var grenze=$("#box2").height();
    $("#box2").animate({height: "+=100px", width:"+=50px"}, 1000, "easeInBack",function() {
$(this).html("Box2 ist "+grenze+" px hoch" );
});
if (grenze>400) {
$("#box2").stop();
}
});

Codebeispiele

Print