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

stop()

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

Animation Events

• finish() / stop(true,true)