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");
});

queue()

• Queue auslesen

Beispiel

var n = div.queue( "fx" );
$( "span" ).text( n.length );

• Queue ersetzen

.queue( [queueName ], newQueue )

Das Array newQueue ersetzt die Inhalte des aktuellen Queues.

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);

Animation vorzeitig beenden

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.

stop() bezieht sich immer auf eine aktuelle Animation, berücksichtigt also nicht die Animationen im Queue

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

Queue löschen - clearQueue()

.clearQueue( [queueName ] )

Standardmäßig ist queueName 'fx' also der Standard-Queue des Elements.

$( "#stop" ).click(function() {
  var myDiv = $( "div" );
  myDiv.clearQueue();
});

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);

Beispiel

$("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.

Verschiedene Objekte sequenziell animieren

Dies könnte mit verschiedenen Callbacks realisiert werden. Seit V 1.6 gibt es die promise() Funktion die gut mit when und done zusammenarbeitet.

.promise( [type ] [, target ] )

    type (default: fx) Type: String The type of queue that needs to be observed.
    target Type: PlainObject Object onto which the promise methods have to be attached

 $.when(
        $("#one").animate({left: 100}, 3000).promise(),
        $("#two").animate({left: 200}, 3000).promise()
    ).done(function() {
        $("#three").animate({left: 300}, 3000).promise()
        .done(function() {
            $("#four").animate({left: 400}, 3000).promise()
        })
    })