JavaScript  »  Guide  »  Guida jQuery 

L'ultimo metodo relativo alle animazioni è .animate(), con il quale è possibile realizzare effetti personalizzati. Nella sua forma più semplice accetta come primo argomento un oggetto JavaScript con la proprietà CSS da animare ed il suo valore finale (assoluto o relativo):

$("p").animate({
	"borderWidth" : "4px", //bordo a 4 pixel
	"width" : "+20px" //aumenta la larghezza di 200 pixel
});

Come è possibile vedere nell'esempio le proprietà CSS costituite da due parole (come border-width) vanno indicate nella loro notazione JavaScript (detta anche camel case)

Gli altri argomenti accettati sono la velocità, l'andamento (easing) ed una funzione di callback. Per quanto riguarda l'easing, il framework offre due opzioni predefinite, linear e swing, mentre altre possibili valori necessitano l'utilizzo di un plugin:

$("#box").animate({
	"borderWidth" : "4px", //bordo a 4 pixel
	"width" : "+=20px" //aumenta la larghezza di 20 pixel
	},
	"slow", //animazione lenta
	"linear", //andamento lineare
	function () {
		//funzione di callback
		alert("Animazione conclusa!");
	}
);

Ecco questo esempio in azione.

In alternativa è possibili passare ad .animate() un secondo argomento nella forma di oggetto JavaScript contentente parametri aggiuntivi oltre a quelli accettati nella sintassi precedente. Ecco la lista completa:

• duration: la durata dell'animazione in millisecondi o come stringa (slow, normal, fast)
• easing: l'andamento, linear o swing (default: swing)
• complete: una funzione da lanciare quando l'animazione è conclusa
• queue: true o false, inserisce l'animazione nella coda generale degli effetti (default: true) oppure la esegue direttamente

Fermare e disabilitare gli effetti

Per concludere, tutti gli effetti possono essere sia disabilitati globalmente impostando su true la proprietà jQuery.fx.off, oppure bloccati "localmente" attraverso il metodo .stop(). Senza passare alcun argomento, questa funzione blocca l'effetto corrente e passa al successivo, mentre per bloccare definitivamente le animazioni (cancellandone la coda) basta passare come primo parametro true:

$("div").stop(); //ferma l'effetto corrente
$("div").stop(true); //ferma e cancella la coda

Infine, passando un secondo argomento true, l'animazione salterà direttamente allo stato finale, lanciando anche la funzione di callback.

$("div").stop(true,true); //ferma e cancella la coda

Altri articoli

Altre guide

Altre newsletter