Metodo animate

Il metodo animate consente di creare effetti di animazione per varie proprietà CSS. L'unico parametro obbligatorio è un oggetto con le proprietà CSS, simile a quello che passiamo al metodo css. Molte proprietà che hanno valori non numerici o multipli non possono essere animate con le funzionalità di base di jQuery (ad esempio background-color). Inoltre, i nomi abbreviati delle proprietà CSS non sono sempre supportati, ad esempio font - invece bisogna usare fontSize o font-size. Prima dei valori si può mettere '+=' o '-=', in tal caso il valore specificato verrà aggiunto o sottratto dal valore corrente della proprietà. Invece dei valori numerici si può anche mettere show, hide o toggle. Tutti gli effetti jQuery, incluso animate, possono essere disattivati globalmente, utilizzando l'impostazione jQuery.fx.off = true, che imposta il valore della durata a 0.

Sintassi

Il primo parametro dell'animazione è un oggetto con le proprietà CSS e i loro valori nel formato chiave: valore, che intendiamo animare. Gli altri parametri sono considerati opzionali. Il secondo parametro - definisce la durata dell'animazione in millisecondi, 400ms di default. Il terzo parametro è la funzione di easing per la transizione (di default è swing), e il quarto - una funzione di callback, che verrà eseguita al termine dell'animazione:

.animate(proprietà, [durata ], [funzione di easing ], [funzione di callback ]);

Il tempo può essere impostato non solo in millisecondi, ma anche con le parole chiave slow (600ms) e fast (200ms), maggiore è il valore, più lenta è l'animazione. Si può passare al metodo come secondo parametro varie opzioni, sotto forma di oggetto JavaScript, contenente coppie chiave: valore:

.animate(proprietà, opzioni);

Ad esempio, impostiamo per le proprietà CSS width e height il valore toggle. La durata su 5000ms, passiamo le funzioni di easing sotto forma di oggetto, per la larghezza sarà una funzione lineare, mentre per l'altezza - easeOutBounce, inoltre al termine dell'animazione verrà eseguita una volta la funzione (vedi chiave complete), che dopo l'elemento con #test posizionerà un div con la scritta 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Nella tabella seguente sono riportate le proprietà e i metodi dell'oggetto options e la loro descrizione:

Nome	Descrizione
`duration`	Durata dell'animazione in millisecondi - stringa o numero. `400ms` di default.
`easing`	Definisce quale funzione di easing utilizzare. `swing` di default.
`queue`	Valore booleano o stringa. `true` di default. Specifica se mettere l'animazione in coda. Con valore `false` l'animazione inizierà immediatamente. Se il parametro viene passato come stringa, l'animazione verrà messa nella coda, rappresentata da questo parametro. Quando si utilizza una coda con un nome personalizzato, l'animazione non partirà automaticamente, per avviarla - utilizzare `dequeue('nomedellacoda')`.
`specialEasing`	Qui puoi passare un oggetto, in cui le chiavi sono le proprietà CSS, e i valori - le corrispondenti funzioni di easing.
`step`	Funzione che viene chiamata per ogni proprietà animata di ogni elemento animato. Permette di modificare l'oggetto `Tween` per cambiare il valore della proprietà prima che venga impostato. Accetta come parametri il valore corrente `tween` e l'oggetto `Tween`.
`progress`	Funzione, chiamata dopo ogni passo dell'animazione, solo una volta per ogni elemento indipendentemente dal numero di proprietà animate. La funzione accetta tre parametri `animation` (sotto forma di promise), `progress` (numero da `0` a `1`) e `remainingMs` (numero di millisecondi rimanenti).
`complete`	Funzione, chiamata una volta dopo la fine dell'animazione dell'elemento. La funzione accetta `animation` (sotto forma di promise).
`start`	Funzione, che viene chiamata quando l'animazione dell'elemento inizia. La funzione accetta `animation` (sotto forma di promise) e `jumpedToEnd` (Valore booleano. Se `true`, allora l'animazione viene automaticamente completata).
`done`	Funzione, che viene chiamata quando l'animazione dell'elemento termina (la sua promise è soddisfatta con successo). La funzione accetta `animation` (sotto forma di promise) e `jumpedToEnd` (Valore booleano. Se `true`, allora l'animazione viene automaticamente completata).
`fail`	Funzione, che viene chiamata quando l'animazione dell'elemento termina con un errore (la sua promise è soddisfatta con errore). La funzione accetta `animation` (sotto forma di promise) e `jumpedToEnd` (Valore booleano. Se `true`, allora l'animazione viene automaticamente completata).
`always`	Funzione, che viene chiamata quando l'animazione dell'elemento viene completata o fermata senza completamento (la sua promise è soddisfatta con successo o con errore). La funzione accetta `animation` (sotto forma di promise) e `jumpedToEnd` (Valore booleano. Se `true`, allora l'animazione viene automaticamente completata).

Esempio

Alla pressione del pulsante #left, spostiamo il quadrato verde a sinistra, e sul pulsante #right a destra di 50px, impostiamo anche la durata su 600ms - con il comando slow:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Vedi anche

metodo show,
che mostra fluidamente gli elementi
metodo stop,
che consente di fermare un'animazione avviata
metodo delay,
che imposta un ritardo nell'esecuzione degli eventi
proprietà jQuery.fx.off,
che consente di disabilitare globalmente l'animazione
selettore animated,
che seleziona gli elementi che in questo momento sono coinvolti in un'animazione