Animazioni con jQuery

Siamo giunti ad un nuovo capitolo della saga dedicata a jQuery. Questa volta andremo a trattare una delle funzionalità più “cool” che offre il nostro amatissimo framework: le animazioni.

Di animazioni c’è n’è veramente per tutti i gusti e combinati ad HTML5 e CSS3 stanno relegando in un angolo il noto Flash di Adobe. Vediamo qualche istruzione base per cominciare.

Prima di partire prepariamo il nostro documento andando ad includere jQuery e a stanziare il DOM.

Una volta fatto ciò prepariamo l’oggetto a cui applicare l’animazione e associamogli un identificativo (nel nostro caso useremo ‘animami’).

<div id="animami">Questo sarà l'oggetto da animare</div>

Affinchè vengano evideziate le animazioni modifichiamo il colore di sfondo:

#animami{
  color:black;
  background:red;
  width:300px;
  height:150px;
}

Effetti di comparsa e scomparsa (o dissolvenza)

Per questo tipo di effetti jQuery mette a disposizione una serie di tre comandi: fadeIn(), fadeOut() e fadeToggle(). Nel nostro caso applicheremo come al solito l’evento di dissolvenza ad un pulsante con identificativo “fade_out”:

$('#fade_out').click(function() {
   //al click del bottone con id "fade_out"
   $('#animami').fadeOut(500);
   //l'oggetto con id "animami" svanisce in 500 millisecondi
});

I commenti nel codice aiutano a capire come in due semplici comandi si può usufruire di un effetto semplice ma al tempo stesso bello da vedere. Stesso discorso vale per il comando .fadeIn() con animazione inversa (in questo caso l’oggetto necessita del parametro display:none nel CSS).

Leggermente più complesso ma decisamente più utile la funzione fadeToggle() che propone l’effetto di comparsa e scomparsa in dissolvenza associati ad un unica funzione jQuery. Essa infatti se l’oggetto è visibile effettua il fadeOut() viceversa effettua il fadeIn(). Funzione utilissima per Popup o Tooltip.

Animazioni tramite .animate()

Il comando .animate() è forse una delle funzioni più duttili di cui dispone jQuery, esso infatti ha un sacco di attributi e valori personalizzabili. Il funzionamento è molto simile, al “click” del pulsante con id “animate” partirà il ridimensionamento a 500px di larghezza per il div “animami”:

$('#animate').click(function() {
   //al click del bottone con id "animate"
   $('#animami').animate({
      width : '500px'
   }, 500);
   //l'oggetto con id "animami" si allarga a 500px in 500 millisecondi
});

Anche in questo caso i commenti parlano da soli.
La bellezza di questo comando è che permette di gestire veramente moltissimi valori come ad esempio l’opacità (andando ad ottenere un risultato simile a quello avuto con il fade), le dimensioni e la posizione.

La varietà di valori accettati inoltre permette con piccole modifiche di variare completamente il comportamento dell’animazione. Ad esempio se proviamo ad aggiungere i valori “+=” davanti ai 500px prima utilizzati la nostra animazione ogni volta che verrà premuto il pulsante “animate” allargherà di 500px il nostro elemento indistintamente dal fatto che esso sia già di 500px.

Nel download del tutorial potete trovare qualche esempio, per scaricarlo cliccate sul pulsante “Download”

Download

Condividi questo articolo:

• Tweet

Info sull' autore:

Appassionato di "web" fin dall'arrivo in casa del primo modem sono diventato nel 2008 uno Sviluppatore Web per Acktel. Sono un amante delle "novità" e dei nuovi linguaggi ma anche di grafica e disegno. Tutte le novità che scopro le condivido sul il mio Blog
Leggi gli altri articoli di Alessandro Alessio