Gli effetti più utilizzati in jQuery

Oggi vi elenco alcuni degli effetti più utilizzati in jQuery.
Questi ultimi sono utilizzati come metodi che possono essere richiamati in qualsiasi oggetto jQuery:

. Show() Mostra gli elementi selezionati.
. Hide() Nasconde gli elementi selezionati.
. FadeIn() Imposta l’opacità degli elementi selezionati al 100%.
. FadeOut() Imposta l’opacità degli elementi selezionati al 0%.
. SlideDown() Visualizza gli elementi selezionati con un movimento a scorrimento verticale.
. SlideUp() Nasconde gli elementi selezionati con un movimento a scorrimento verticale.
. SlideToggle() Mostra o nasconde gli elementi selezionati con un movimento a scorrimento verticale, a seconda che gli elementi siano attualmente visibili o meno.

Dopo aver selezionato un elemento del DOM attraverso il suo ID o la sua classe, è possibile applicargli uno di questi effetti come segue:

. $(‘#pippo’).show();

Inoltre è possibile specificare la durata degli effetti incorporati.
Ci sono due modi per farlo: è possibile specificare un tempo in millisecondi:

. $(‘#pippo’).show(300);

o utilizzare una delle velocità predefinite:

. $(‘#pippo’).show(‘slow’);

Le velocità predefinite sono specificate in jQuery.fx.speeds ed è possibile modificare o estendere questo oggetto per cambiare le impostazioni predefinite:

jQuery.fx.speeds.fast = 50;
jQuery.fx.speeds.turtle = 3000;
$( ‘.hidden’ ).hide( ‘fast’ );
$( ‘.other-hidden’ ).show( ‘turtle’ );

Se vogliamo specificare cosa deve accadere quando l’effetto è completo, possiamo fornire una funzione di callback per i metodi di animazione.
All’interno della callback, la parola chiave “this” si riferisce all’elemento DOM prima che l’effetto venga applicato.
A questo punto siamo in grado di trasformarlo in un oggetto jQuery passandolo come parametro della funzione: $(this).

$(‘p.old’).fadeOut(300, function() {
   $(this).remove();
});

N.B. che se la selezione non contiene alcun elemento, la callback non verrà mai eseguita.

Effetti personalizzati con Animate()

Se le animazioni predefinite non ci soddisfano possiamo utilizzare Animate() per creare animazioni personalizzate.

Il metodo Animate() accetta fino a tre argomenti:

1. un oggetto che definisce le proprietà da animate
2. la durata dell’animazione (in millisecondi)
3. una funzione di callback che verrà eseguita quando l’animazione è completata

$( ‘.funtimes’ ).animate({
   left: ‘+=50′, // increase by 50
   opacity: 0.25,
   fontSize: ’12px’
},
300,
function() {
// executes when the animation is done
}
);

Gestione delle animazioni

Infine dobbiamo ricordare che jQuery fornisce due metodi importanti per la gestione delle animazioni

.Stop() interrompe l’esecuzione delle animazioni sugli elementi selezionati.
.Delay() fa una pausa prima dell’esecuzione del successivo metodo di animazione (impostare questo valore in millisecondi).

jQuery fornisce anche i metodi per la gestione della coda degli effetti, la creazione di code personalizzate e l’aggiunta di funzioni personalizzate a queste code.
Di tutto questo vi parlerò nella prossimo articolo.

La vostra opinione

Fatemi sapere se avete trovato utile questo articolo e se secondo voi ci sono ulteriori animazioni da tenere in considerazione quando ci si avvicina per la prima volta a jQuery.