back to top

Effetti jQuery: mostrare/nascondere un elemento con .hide(), .show() e .toggle()

Studiare un aspetto grafico piacevole è uno delle primarie esigenze di ogni web designer che si rispetti. Nella fase di progettazione del layout di un sito web si cerca sempre, quindi, di realizzare un "contenitore" che, oltre ad essere funzionale ed usabile, sia anche piacevole alla vista, magari aggiungendo delle animazioni o degli effetti in grado di migliorare la user experience degli utenti nonchè la loro percezione complessiva circa la qualità del nostro lavoro.

Al fine di ottenere un simile risultato fino a poco tempo fa molti web designer ricorrevano a soluzioni proprietarie come Adobe Flash, ma oggi il ricorso a Javascript sembra la soluzione preferibile: adottando un framework come jQuery, inoltre, sarà possibile realizzare effetti grafici d’impatto scrivendo poco codice e con la certezza che questi siano cross-browser (non ci sono problemi di compatibilità tra i diversi browser) e, molto spesso, cross-device.

Con jQuery si possono ottenere effetti di movimento, di transizione, attenuazione e molti altri: tutto questo è reso possibile da diversi metodi nativi di jQuery che, soprattutto grazie all’interazione coi CSS, consentono di applicare i più svariati effetti agli elementi della pagina. L’unico limite è nella fantasia dello sviluppatore: combinando insieme i diversi metodi, infatti, è possibile ottenere risultati davvero stupefacenti che poco hanno da invidiare a tecnologie "d’impatto" come il già citato Flash!

Volendo mantenere un certo ordine espositivo, andremo a dividere gli effetti in quattro categorie che analizzeremo separatamente:

  • mostrare e nascondere un elemento
  • sliding
  • fading
  • animazioni

Mostrare e nascondere un elemento

Questa categoria di effetti comprende alcuni semplici metodi che permettono di visualizzare o nascondere un elemento. I metodi di questa famiglia consentono una personalizzazione della durata (espressa in millisecondi o con le stringhe "slow", "normal", "fast") e la possibilità di associare un callback da eseguire al termine dell’effetto.

Di seguito l’elenco dei metodi di questa famiglia:

  • .show() ([durata],[callback]): mostra l’elemento selezionato;
  • .hide() ([durata],[callback]): nasconde l’elemento selezionato;
  • .toggle() ([durata],[callback]): inverte la visibilità attuale dell’elemento (se è visibile lo nasconde, se è nascosto lo mostra);

Vediamo qualche esempio:

1) Mostrare un’immagine nascosta alla pressione su un dato bottone:

$("#bottone").click(function () {
  $("#miaimmagine").show("slow",function() {
    alert("Ora sono visibile");
  });
});

L’effetto di .show(), se utilizzato senza specificarne la durata, è equivalente a .css(‘display’,’block’). Viceversa quando viene specificata una durata, come nell’esempio, jQuery esegue un’animazione che agisce sull’altezza, la larghezza e l’opacità dell’elemento.

Nel nostro esempio abbiamo espresso la durata utilizzando la stringa "slow" che corrisponde a 600ms ("fast" corrisponde a 200ms).

2) Nascondere un’immagine visibile al click su un dato bottone:

$("#bottone").click(function () {
  $("#miaimmagine").hide("slow",function() {
    alert("Ora sono sparita");
  });
});

L’effetto di .hide(), se utilizzato senza specificarne la durata, è equivalente a .css(‘display’,’none’). Circa la durata valgono le medime considerazioni viste nell’esempio precedente.

3) Applicare .toggle() per mostrare/nascondere un’immagine alla pressione su un bottone:

$("#bottone").click(function () {
  $("#miaimmagine").toggle();
});

Nell’esempio qui sopra non abbiamo specificato la velocità ne tantomento un callback ma nulla vieta di farlo, esattamente come visto nei due esempi precedenti.

Vediamo, infine, un esempio completo e funzionante:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>

    <img border="0" id="miaimmagine" src="foto.jpg"/><br/>
    <input type="button" id="bottone" value="Clicca qui!"/>

    <script>
    $("#bottone").click(function () {
      $("#miaimmagine").toggle("slow");
    });    
    </script>

  </body>
</html>

Si noti che il codice jQuery che gestisce l’effetto è stato inserito direttamente nel body della pagina ma dopo gli elementi interessati. Questo perchè, altrimenti, non sarebbe stato possibile agire su degli elementi non ancora caricati all’interno dell’albero del DOM. Ovviamente avremmo potuto ottenere lo steso risultato utilizzando $(document).ready() come abbiamo già visto nelle passate lezioni.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).