L'unico nuovo metodo introdotto dalla libreria è .effect().
Nella sua forma più semplice accetta un primo argomento stringa che
rappresenta il tipo di effetto che vogliamo applicare
alla collezione: 'blind', 'bounce', 'clip',
'drop', 'explode', 'fold', 'highlight',
'puff', 'pulsate', 'scale', 'shake',
'size', 'slide', 'transfer'.
Ecco un esempio pratico che li mostra dal vivo.
Di questi effetti i più interessanti sono highlight
(spesso usato per evidenziare cambiamenti all'interno di una pagina,
per esempio l'aggiornamento del testo di un box), blind
(usato per nascondere un elemento) e transfer (per
indicare il rapporto fra due elementi).
Oltre
al tipo di effetto il metodo accetta ulteriori due argomenti opzionali:
un oggetto JavaScript per la personalizzazione dell'effetto ed una
funzione da eseguire alla fine dell'animazione. I parametri con i quali
è possibile modificare le impostazioni di base degli effetti variano di
caso in caso e sono tutti elencati nella documentazione ufficiale.
Per esempio highlight accetta un oggetto formato da una
chiave per il colore (color) da usare ed una per la
modalità di visualizzazione ("hide" o "show"),
mentre blind sostituisce color con direction
("vertical" o "horizontal") per specificare
se l'oggetto va animato in orizzontale o verticale.
Scorciatoie di visualizzazione.
Parte degli effetti disponibili con in metodo .effect()
possono essere realizzati anche con alcuni metodi già presenti in
jQuery: .show(), .hide() e .toggle().
Questi metodi accettano gli stessi parametri di .effect(),
ma mantengono l'azione svolta in jQuery, permettendo così di
visualizzare un elemento con un effetto a tendina e
nasconderlo con una esplosione (esempio):
//Mostra nascondi box
$("#mostrabox").click(function () {
var box = $('#box');
if (box.is(':visible')) {
box.hide('explode');
} else {
box.show('blind');
}
});Come detto in precedenza solo alcuni effetti possono essere
associati ai metodi .show(), .hide() e .toggle():
Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale. Per tutti gli
altri è necessario ricorrere sempre a .effect().