Tutorial: Animare oggetti con jQuery
Scritto da Salvo il 25 marzo 2010 con 1 commento
Tags: animazioni , javascript , jquery , tutorial
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 Animazioni con jQuery . 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.
Con questa funzione e dei buoni Css iniziali potete ottenere gran parte delle animazioni più comuni!
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.
In Conclusione
Ora avete delle buone basi per animare oggetti Html con jQuery… divertitevi! E se non l’avete ancora fatto scaricate i file di esempio Animazioni con jQuery !
Articoli correlati:
- Tutorial – Sistemiamo il CSSTip #6 con jQuery Come ha puntualizzato qualcuno (grazie Stefano!) leggendo il CSS Tip #6, può verificarsi il caso che l’elemento contenuto dall’elemento “contenitore” possa essere più alto di questo e di conseguenza ne [...]...
- Ripassiamo gli inizi (jQuery) Iniziamo questo speciale su MoebiusMania.net dedicato a jQuery con un post pseudo teorico, lo scopo è chiarire alcune piccole questioni che sono rimaste oscure nei tutorial singoli riguardo a: Cos’è [...]...
- jQuery 1.5 Ecco nella sua quinta incarnazione la libreria javascript più usata al mondo! A un anno esatto dalla versione 1.4 e dopo ben 4 minor release siamo arrivati alla versione 1.5 [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
salve,sono un principiante e ho iniziato a seguire passo passo le istruzioni del tutorial.
ho inserito tutto come scritto.primo problema:
quando dó il nome al fila prova.js,questo cambia icona e non mi é piu consentito aprirlo.quindi impossibile consultarlo.
secondo problema:quando passo il mouse sulla ….”a”….non si sposta verso destra e ritorna,ma appare un rettangolino bianco sotto a destra della ….”a”….
perché succede questo?grazie