JQuery - Animation

Animation

Hinweis: Damit Elemente bewegt werden können muss die Positionierung auf absolute, relative oder fixed stehen.

$(selector).animate({params},speed,callback);

Beispiel

 $("button").click(function(){
    $("div").animate({left: '250px'});
 });

Mehrere Eigenschaften gleichzeitig animieren

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

Relative Wertangaben

height: '+=150px',
width: '+=150px'

Vordefinierte Variablen

//"show", "hide", "toggle"
height: 'toggle'

Animation Queue

• Wenn mehrere animate() Aufrufe, auf ein Objekt, nacheinander erfolgenc erzeugt jQuery intern einen Queue mit diesen Aufrufen. Dann werden sie nacheinander abgearbeitet.
• Ein Queue hat einen Namen
• Standardname für Queues wenn nicht ander benannt ist 'fx'

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

Chaining für bessere Performance

Mit dieser schreibweise muß jQuery beim erstellen des Queue, das Element nur einmal finden.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

jQuery kommt auch mit dieser Syntax zurecht.

$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);

stop() / finish()

$(selector).stop(stopAll,goToEnd);

Beendet die aktuelle Animation. Der Qeue bleibt erhalten. Wenn stopAll auf true gesetzt wird, wird der queue gelöscht. Ist goToEnd auf true gesetzt wird das Ende der Animation angesprungen.

finish() ist ein Shortcut für stop(true,true)

Callback

Wenn eine Animation 100% beendet ist, kann eine Callback Funktion aufgerufen werden. Diese Funktion wird also nach dem Ende der Animation ausgeführt.

Beispiel allgemein

$(selector).hide(speed,callback);

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

Ohne Callback würde der alert zu früh angezeigt

Falsch

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

So kann man auch Animationen verschiedener Elemente aneinander hängen.