Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Il metodo effect()

Creare effetti avanzati con questo metodo specifico di jQuery UI
Creare effetti avanzati con questo metodo specifico di jQuery UI
Link copiato negli appunti

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().


Ti consigliamo anche