Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Fare scomparire e apparire un’immagine con jQuery

Scritto da Fare-internet il 22 aprile 2010 condividi condividi

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:

<script src="js/jquery-1.4.2.min.js"></script>

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

<style media="screen">
#img{display:none}
</style>


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:

<div id="id1">Fade in</div>
<div id="id2">Fade out</div>
<img src="img/xxxx.jpg" alt="appaio e scompaio" id="img"  />

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:

<script>
</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

Twitter