jQuery Effekte - Animation

jQuery ermöglicht es uns, benutzerdefinierte Animationen zu erstellen.

jQuery Animation-animate() Methode

jQuery animate()Verfahren führt eine benutzerdefinierte Animation für eine Gruppe von CSS-Attributen aus.

Dies istanimate()Syntax des Verfahrens:

$(selector).animate({styles},　duration,　easing,　callback)

Parameter:

• {styles} -Objekt, das die CSS-Attribute und -Werte angibt, zu denen die Animation bewegt wird

• dauer -Bestimmt die Dauer der Animation. Mögliche Werte: "slow", "fast" oder Millisekunden

• easing -Anweisung, welche Easing-Funktion für die Übergänge verwendet wird. Mögliche Werte: "swing", "linear"

• callback-Funktion, die nach dem Abschluss der animate() Methode aufgerufen wird

Dieser Beispiel zeigt, wie man eine Animation durch Ändern der Breite eines Elements einstellt:

$("button").click(function(){
　　$("div").animate({width:　"500px"});
});

Das folgende Beispiel animiert das Element durch Ändern seiner Position:

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

jQuery animate()-Mehrere Attribute setzen

Wir können auch gleichzeitig mehrere Attribute eines Elements animieren.

$("button").click(function(){
　　$("div").animate({
　　　　width: ''"500px",
　　　　height: ''"400px",
　　　　Deckkraft: ''0.3,
　　　　links: ''"50px"
　　});
});

Der folgende Beispiel zeigt mit animate() die Verwendung vondauerundeasingParameter:

$("button").click(function(){
　　$("div").animate({
　　　　width: ''"500px",
　　　　height: ''"400px"
　　},　4000, ''linear'');
});

Der folgende Beispiel zeigt mit animate() die Verwendung vonRückrufParameter:

$("button").click(function(){
　　$("div").animate({
　　　　width: ''"500px",
　　　　height: ''"400px"
　　},　500, ''linear",
　　function() {
　　　　$("this").after("<h2>Animation abgeschlossen</h2>");
　　});
});

jQuery animate()-Verwendung von Queue-Animationen

Standardmäßig verfügt jQuery über die Warteschlangenfunktion für Animationen.

In der Warteschlange warten eine oder mehrere Funktionen darauf, ausgeführt zu werden.

Dies bedeutet, dass jQuery, wenn mehrere animate() Aufrufe hintereinander geschrieben werden, diese Methodenaufrufe in einer "internen" Warteschlange erstellt. Dann führt es die Animationen aufgerufen.

Der folgende Beispiel ändert zunächst die Breite des DIV-Elements, dann die Höhe und schließlich die Schriftgröße des Textes:

$("button").click(function(){
　　let div = $("div");
　　div.animate({width: ''"500px"});
　　div.animate({height: ''"200px"});
　　div.animate({fontSize: ''"10em"});
});

Wir können auch die Verknüpfungsfunktion von jQuery verwenden, um mehrere Attribute eines Elements nacheinander in einer Warteschlange zu animieren.

$("button").click(function(){
　　$("div")
　　　　.animate({width: ''"500px"})
　　　　.animate({height: ''"200px"})
　　　　.animate({fontSize: ''"10em"})
　　　　.animate({Deckkraft: 0.3});
});

Sie werden im späteren Teil dieses Tutorials mehr über Links erfahren.

jQuery animate()-Verwenden Sie relative Werte

Animationseigenschaften können auch relativ sein. Wenn ein Wert mit einem führenden+=-=Zeichenfolge, dann wird die Zielwert durch Hinzufügen oder Subtrahieren der angegebenen Zahl vom aktuellen Wert der Eigenschaft berechnet.

$("p").click(function(){
　　$(this).animate({
　　　　fontSize: "+=5px",
　　　　Paddung : "+=10px"
　　});
});

jQuery animate()-Verwenden Sie vorgegebene Werte

Darüber hinaus können wir sogar die Animationswerte der Eigenschaft "show", "hide" oder "toggle" angeben:

$("button").click(function(){
　　$("div").animate({höhe: "toggle"});
});

jQuery Effekt Referenz

Für vollständige Effektreferenzen besuchen Sie bitte unserejQuery Effekt Referenzhandbuch.