jQuery Effetti - Animazione

jQuery ci permette di creare animazioni personalizzate.

Metodo di animazione jQuery - animate()

jQuery animate()metodo esegue animazioni personalizzate su un gruppo di proprietà CSS.

Questo èanimate()Sintassi del metodo:

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

Parametri:

• {styles} -Specificare l'oggetto CSS property e value per il movimento dell'animazione

• durata -Determina quanto tempo durerà l'effetto animazione. Valori possibili: "slow", "fast" o millisecondi

• easing -Indica la funzione di easing da utilizzare per la transizione. Valori possibili: "swing", "linear"

• callback-Specificare la funzione da chiamare dopo l'esecuzione del metodo animate()

Esempio di animazione dell'elemento attraverso la modifica della larghezza dell'elemento:

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

Esempio di animazione dell'elemento attraverso la modifica della posizione dell'elemento:

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

jQuery animate() - impostazione di più attributi

Possiamo anche impostare animazioni per più attributi di un elemento contemporaneamente.

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px",
　　　　opacità: 0.3,
　　　　left: "50px"
　　});
});

L'esempio seguente utilizza animate() per dimostraredurataeeasingParametri:

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

L'esempio seguente utilizza animate() per dimostrareCallbackParametri:

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

jQuery animate() - animazione con coda

Per impostazione predefinita, jQuery ha la funzione di coda per l'animazione.

Nella coda, una o più funzioni aspettano di essere eseguite.

Questo significa che se si scrivono più chiamate animate() una dopo l'altra, jQuery crea una "coda interna" usando queste chiamate. Poi, esegue ciascuna chiamata animazione per ciascuna.

Esempio di esempio: prima si cambia la larghezza dell'elemento DIV, poi l'altezza e infine si aumenta la dimensione del testo del font:

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

Possiamo anche utilizzare la funzione di link jQuery per animare singolarmente più attributi di un elemento in una coda.

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

Ulteriori informazioni sui link verranno fornite nella parte posteriore di questo tutorial.

jQuery animate()-utilizzo dei valori relativi

Le proprietà animate possono anche essere relative. Se viene fornito un valore con una sequenza di caratteri di avvio += o -=, il valore di destinazione viene calcolato aggiungendo o sottraendo il numero dato dal valore corrente dell'attributo.

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

jQuery animate()-utilizzo dei valori predefiniti

Inoltre, possiamo anche specificare il valore animato dell'attributo "show", "hide" o "toggle":

$("button").click(function(){
　　$("div").animate({altezza: "toggle"});
});

Manuale di riferimento degli effetti jQuery

Per una guida completa agli effetti, visitare il nostroManuale di riferimento degli effetti jQuery.