Guida agli effetti grafici fondamentali di jQuery
JQuery è una delle librerie JavaScript più apprezzate dagli sviluppatori Web. I vantaggi della libreria sono: uno sviluppo più semplice e veloce rispetto a JavaScript, risultati cross browser e un ricco set di funzioni e plugins utilizzabili per gestire praticamente qualsiasi aspetto dinamico di una pagina HTML. La ricchezza di possibilità offerta di jQuery è però un'arma a doppio taglio: chi si avvicina alla libreria la prima volta rischia di perdersi tra le numerose API, per quanto ben documentate. Del resto questo è il problema di qualsiasi framework o libreria: prima di usare uno strumento di questo tipo, dobbiamo valutare se lo sforzo richiesto per acquisire famigliarità con la libreria verrà ripagato dei vantaggi della stessa.
Questo articolo intende aiutare chi conosce poco jQuery, oppure è sprovvisto di una visione d'insieme della libreria, specialmente per quanto riguarda gli effetti grafici di base. Vedremo come l'elenco di funzioni documentate qui (circa una ventina) possa essere riassunto e organizzato all'interno di tre gruppi di effetti grafici. Una volta compresa la natura e lo scopo di questi gruppi sarà molto più semplice orientarsi all'interno della categoria Effects di jQuery. Questa categoria può essere considerata la base gli effetti grafici di jQuery, che già da sola basta per implementare la maggior parte degli effetti che altrimenti dovremo realizzare con JavaScript.
Oltre alla categoria “Effects” jQuery offre molte altre scelte, prima tra tutte la famosa jQuery UI, nonché altre categorie che in qualche modo interessano gli effetti grafici, come ad esempio “CSS”, “Manipulation” ed “Events”. Abbiamo scelto di iniziare dalla libreria “Effects” sia per motivi didattici, sia perché richiede pochi concetti propedeutici, sia perché da sola permette di realizzare la maggior parte delle esigenze del Web.
Tre gruppi di effetti
Abbiamo accennato a come la categoria “Effects” di jQuery possa essere suddivisa principalmente in tre gruppi, che sono: Display, Slide e Fade. Il primo gruppo (Display) contiene le funzioni che gestiscono la visibilità dell'elemento, ovvero decidono se un certo componente HTML debba essere visibile nella pagina. Il secondo gruppo (Slide) riguarda gli effetti grafici che fanno scivolare verso il basso o verso l'alto il contenuto del componente HTML: si tratta di un effetto che in qualche modo ricorda quello delle classiche presentazioni PowerPoint di MS Office. Nell'ultimo gruppo (Fade) troviamo le funzioni che gestiscono la trasparenza del componente. Anche queste assomigliano ai tradizionali effetti grafici usati nelle slide di una presentazione.
La suddivisione della categoria “Effects” di jQuery in questi gruppi deriva dall'osservazione di un pattern che si ripete tra le varie funzioni degli effetti grafici, come vedremo nelle pagine seguenti.
