MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Animare oggetti con jQuery
Nel primo tutorial che ho pubblicato tempo fa su jQuery, abbiamo accennata molto velocemente a una funzione che permetteva di animare da codice degli elementi Html, oggi rivedremo quella funzione con un po' più di dettagli e ne analizzeremo altre che ci permetteranno di creare effetti animati per le nostre pagine web e renderle più "cool" ;).
Se non avete mai usato le funzioni di animazione messe a disposizione da jQuery questo tutorial vi fornirà le basi per poterci smanettare!
Software richiesto
Code editor a scelta (Aptana, Coda, Dreamweaver, ecc..)Prerequisiti
I due precedenti tutorial su jQuery (primo e secondo)Argomenti trattati
Funzioni animate(), hide() e show() di jQuery, proprietà Css "display".1. Accendiamo jQuery
Per questo tutorial metto a disposizione un file di inizio e uno di fine in uno zip scaricabile [download id="7" format="1"]. Nel file di inizio troverete una pagina Html basilare con alcuni elementi grafici gia inseriti che animeremo nel corso del tutorial. Se invece volete utilizzare queste tecniche su una vostra pagina preesistente dovrete innanzitutto "installare" jQuery sulla vostra pagina, se non sapete come fare vi ricordo che ho già pubblicato un tutorial a riguardo.2. I CSS di partenza
Una cosa bella di Javascript e jQuery è che "continuano" quello che abbiamo iniziato con i Css, quindi spesso potreste notare che per ottenere effetti interessanti è bene iniziare proprio da questo linguaggio. Se vogliamo mostrare qualcosa prima dobbiamo nasconderlo, se vogliamo fare entrare qualcosa prima dobbiamo mandarlo fuori:display: none /* Rende un oggetto non visibile */ right: -100px /* Posizionamento "negativo" */La proprietà "display" non va confusa con l'opacità, non rende solo trasparente un elemento ma fa in modo che non venga proprio elaborato visivamente, quindi gli elementi circostanti si comporteranno come se questo non ci fosse ; mentre usando dei valori negativi di posizione ad oggetti con posizionamento assoluto o fisso li mandiamo fuori dallo schermo senza cancellari, che è una grande cosa!
3. Animare
Ok ora passiamo allo script, all'interno della funzione principale scriviamo questa riga di codice:// Il metodo animate()
$("#oggetto").animate({"right":"5px"},1000);
La funzione "animate" di jQuery l'avevamo già vista nel primo tutorial, ora la analizziamo un po più a fondo:
- per prima cosa passiamo una serie di proprietà Css con il rispettivo valore all'interno di una parentesi graffa
- per ogni cosa che vogliamo animare dobbiamo indicare prima la proprietà e il valore verso il quale deve l'interpolazione deve avere luogo (il punto di partenza sono gli attuali valori Css)
- se vogliamo animare più proprietà alla volta le separiamo con una virgola dentro la parentesi graffa, per esempio {"top":"10px","right":"15px"}
- dopo la parentesi graffa scriviamo una virgola e indichiamo la durata dell'interpolazione in millisecondi, quindi 1 secondo = 1000 millisecondi.
4. Nascondi & Mostra
Adesso diamoci dentro con l'elemento che abbiamo nascosto all'inizio con "display:none":// Mostro l'elemento nascosto con i Css
$("#oggetto2").fadeIn();
come potete immaginare fadeIn() (le maiuscole sono importanti) è una funzione che esegue un effetto di dissolvenza in entrata, possiamo al contrario usare fadeOut() per fare una dissolvenza in uscita. Nella stessa famiglia ci sono anche le funzioni slideUp() e slideDown() che invece eseguono un'animazione a tendina (il primo nasconde e il secondo mostra), mentre i metodi più generici show() e hide() eseguono fade e slide in modo combinato.
5. Qualche considerazione
Le funzioni del passo precedente condividono una cosa interessante, dentro la loro parentesi tonda possiamo inserire un valore numerico per esprimere in millisecondi la durata dell'animazione, quindi se volessi modificare l'azione di prima per far si che duri mezzo secondo devo solo fare una piccola modifica:// Dissolvenza in mezzo secondo
$("#oggetto2").fadeIn(500);
Se invece volessimo nascondere un elemento direttamente tramite jQuery per poi mostrarlo con un'animazione possiamo concatenare due o più funzioni per non riscrivere il selettore più volte:
// Nascondo un elemento e lo mostro animandolo tramite jQuery
$("#oggetto3").hide().show(500);
// Senno avremmo dovuto scrivere
$("#oggetto3").hide();
$("#oggetto3").show(500);
Un'ultima nota che vale solo per show() e hide(), se vengono scritti senza specificare una durata, vengono eseguiti istantaneamente, senza animazione.