JavaScript  »  Guide  »  Guida jQuery UI 

Molto spesso gli sviluppatori sono portati ad utilizzare gli effetti grafici come "contorno ludico" alla vera e propria interazione con l'utente. La diretta conseguenza di questo atteggiamento, è che spesso ci troviamo di fronte a pagine piene di inutili animazioni che ricordano molto dei giochi in Flash o le vecchie pagine anni '90 farcite di gif animate.

In realtà, le animazioni sono uno strumento fondamentale per catturare l'attenzione dell'utente, creare relazioni fra gli elementi dell'interfaccia e creare un'interazione più fluida con i visitatori.

In jQuery UI l'approccio usato dagli sviluppatori è stato quello di implementare gli effetti grafici soprattutto come estensioni dei metodi già presenti nella libreria di base.

Animazioni sul colore

La libreria estende anzitutto le capacità del metodo .animate() nativo, introducendo le transizioni di colore che permettono di sostituire un colore con un altro con un effetto graduale.

Le proprietà CSS che supportano questo effetto sono: backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, outlineColor. L'animazione eseguirà una transizione dal colore attuale ad uno impostato in formato esadecimale, rgb o stringa (ad esempio "red", esempio).

//CSS

.error { background-color: #F00; color:#FFF; }

//JS

$("#box").text("Errore!").addClass("error",1000);

Animazioni "di classe"

Seguendo l'approccio ad estensione, UI aggiunge nuove caratteristiche ai metodi per la manipolazione delle classi CSS. Così, passando un numero in millsecondi come secondo parametro di .addClass(), le proprietà CSS definite nella classe saranno applicate con una transizione della durata indicata:

$("#box").text("Errore!").addClass("error",1000,"linear",function () {
	alert("Errore Notificato!"); 
});

L'introduzione di questa particolare tipologia di effetti è molto importante, in quanto permette di separare la parte di scripting da quella grafica, semplificando futuri adattamenti grafici o addirittura l'adozione di diversi stili grafici pur mantenendo inalterato il codice JavaScript. Oltre al parametro della durata, il metodo .addClass() accetta altri due argomenti opzionali indicanti l'andamento (easing) dell'animazione ed una funzione da lanciare alla sua conclusione (callback).

$("#box").switchClass('classeCorrente','nuovaClasse',500,'easeOutBounce',function(){
    alert("Animazione conclusa!");
});

Ecco un esempio live.

Altri metodi coinvolti nell'estensione sono .removeClass() e.toggleClass(); ambedue accettano i tre argomenti come .addClass().

Per concludere è stato aggiunto un quarto metodo, .switchClass(), che permette di animare un'elemento a partire da una classe applicandogli le proprietà di una seconda. Nell'ordine gli argomenti sono: classe iniziale, classe finale, durata, andamento (opzionale) e funzione conclusiva (opzionale):

$("#box").switchClass('classeCorrente','nuovaClasse',500,'easeOutBounce',function(){
    alert("Animazione conclusa!");
});

Easing avanzato

Il terzo campo nel quale UI estende jQuery è il numero di andamenti, in inglese easing, disponibili.

Nato come plugin per jQuery, questo specifico codice JavaScript permette di modificare la dinamica con cui si svolge l'animazione, simulando effetti elastici o di attrito al fine di rendere più realistica l'animazione.

Potete trovare la lista di tutti gli andamenti disponibili sulla home page del progetto.

Altri articoli

Altre guide

Altre newsletter