JavaScript  »  Guide  »  Guida jQuery UI 

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

Altri articoli

Altre guide

Altre newsletter