- Learn
- Guida jQuery
- Effetti di base
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.
Se vuoi aggiornamenti su Effetti di base inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Gmail, come difendersi dal phishing
Quando utilizziamo la posta elettronica capita molto spesso di ricevere messaggi sospetti, ad esempio email scritte in un inglese improvvisato […]