Effetti di base

Passiamo ora ai metodi disponibili per generare animazioni. Il primo gruppo comprende alcuni effetti di base, richiamabili attraverso una sintassi sintetica ed intuitiva, ecco un esempio:

//mostra tutti gli elementi p nascosti
$("p").show("slow");

Con il metodo .show() tutti gli elementi della collezione vengono mostrati animandone contemporaneamente l’opacità e la dimensione. L’operazione opposta viene eseguita da .hide(), mentre per alternare le due animazioni in base alla visibilità degli elementi si può usare .toggle().

Per quanto riguarda gli argomenti da passare, tutti i metodi accettano anzitutto una stringa rappresentante la durata generica dell’animazione (slow, normal, fast) oppure uno specifico periodo in millisecondi. Inoltre si può associare una funzione di callback da eseguire alla fine dell’animazione. Volendo introdurre un esempio completo del metodo .show() visto in precedenza potremmo scrivere:

$(".nascosto").show("slow",function () {
	alert("Animazione conclusa!");
});

Una caratteristica interessante di questi tre metodi è che se non viene passato alcun argomento, impostano direttamente lo stato finale dell’animazione, risultando molto utili come scorciatoie per mostrare o nascondere gli elementi di una collezione:

$("p").hide();
// equivale a scrivere
$("p").css("display","none");

Ecco alcuni esempi pratici.

Metodi specifici

Oltre ai metodi come .show() che utilizzano un’animazione combinata di opacità e dimensione, jQuery mette a disposizione altre due scorciatoie per effetti molto usati: anzitutto .slideDown() .slideUp() e .slideToggle(), che agiscono sull’altezza degli elementi, quindi .fadeIn(), .fadeOut() e .fadeTo(), che ne modificano l’opacità.

Tutti questi metodi accettano i medesimi argomenti degli effetti di base, ad eccezione di .fadeTo() che prevede un argomento aggiuntivo indicante l’opacità finale dell’elemento:

//nascondi gli elementi p
$("p").fadeOut("slow");

//dimezza l'opacità di un elemento
$("p").fadeTo("slow",0.5,function () {
	alert("Animazione conclusa!");
});

Ecco una pagina di esempio.