Fare scomparire e apparire un’immagine con jQuery

Eseguire un fade-in o un fade-out con jQuery è molto semplice. Vediamo passo passo i pezzi di codice che sono necessari.

Per prima cosa all’interno del tag head inseriamo la chiamata alla libreria di jQuery, supponendo che sia contenuta all’interno di una cartella js il codice da inserire è il seguente:

Dopo aver fatto questo dobbiamo definire una regola css per l’idendtificatore (o id) dell’immagine, quindi sempre all’interno del tag head scriviamo:


Così facendo abbiamo detto che l’immagine su cui vogliamo ottenere l’effetto, a cui assegneremo l’attributo id=”img”, non dovrà essere visualizzata.

Ora all’interno del body inseriamo queste righe di codice html:

Fade in
Fade out
appaio e scompaio

In pratica abbiamo nel body due div con i rispettivi id (id1,id2) l’effetto che vogliamo ottenere è che cliccando su Fade in l’immagine appare piano piano, mentre se clicchiamo su Fade out l’immagine scompare piano piano, ovviamente il secondo effetto funziona solamente se l’immagine è visualizzata.

Per ottenere questi effetti basta che aggiungiamo sotto l’immagine un tag script:

ed al suo interno scrivere il seguente codice javascript

$('#id1').click(function() {
	  $('#img').fadeIn('slow');
});
$('#id2').click(function() {
	  $('#img').fadeOut('slow');
});

Mettete inseime tutti i pezzi e il gioco è fatto!

Per vedere una demo
Per scaricare il sorgente