Metodo animate() della jQuery

Metodi di effetto jQuery

Il metodo animate() esegue animazioni personalizzate su un insieme di proprietà CSS.

Le animazioni rendono possibile la transizione animata da una configurazione di stile CSS a un'altra.

Tutte le proprietà di animazione devono essere impostate su un singolo valore numerico (ad esempio, larghezza, altezza o valore di sinistra).

Oltre alle stringhe "show", "hide" e "toggle", i valori di stringa non possono impostare animazioni (ad esempio, colore di sfondo). Questi valori permettono di nascondere e mostrare gli elementi animati.

Le proprietà di animazione possono anche essere relative. Se viene fornito un prefisso += o -=, il valore di destinazione viene calcolato aggiungendo o sottraendo il numero fornito al valore corrente dell'attributo.

Oltre alle proprietà di stile, è possibile animare alcune proprietà non di stile (ad esempio: scrollTop e scrollLeft).

Sintassi 1:

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

Sintassi 2:

$(selector).animate({styles}, {options})

Esempio

Imposta l'animazione dell'elemento modificando la larghezza:

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

Crea animazioni modificando la larghezza e l'altezza degli elementi:

$\("#btn1\").click(function(){
　　$\("div\").animate({width:　\"500px\"});
　　$\("div\").animate({height:　\"400px\"});
});

Esegui animazioni sugli elementi utilizzando più proprietà di stile e valori:

$\("#btn1\").click(function(){
　　$\("div\").animate({
　　　　　width:\"500px\",
　　　　　height:\"400px\"
　　});
});

usando animate() condelduration e easingdelParametri:

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

Usa animate() insieme a una funzione di callback:

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

Specifica più animazioni{styles} e{options} utilizzando la sintassi alternativa:

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

Aggiungi scorrimento liscio quando l'utente scrolla la pagina:

let size = $(".main").height(); // Ottieni l'altezza di ".main"
$(window).keydown(function(event) {
　　if(event.which === 40) { // Se premo il tasto freccia giù
　　　　$("html, body").animate({scrollTop: "+=" + size}, 300);
　　} else if(event.which === 38) { // Se premo il tasto freccia su
　　　　$("html, body").animate({scrollTop: "-=" + size}, 300);
　　}
});

Usa valori relativi per impostare l'animazione per tutti i paragrafi:

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

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

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

Valore Parametro(Sintassi 1)

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

Valore Parametro（Sintassi 2）

$(selector).animate({styles}, {options})

Metodi di effetto jQuery