Il metodo fadeOut() di jQuery non solo modifica l'opacità di un elemento, ma imposta anche la sua proprietà display su none. Ciò significa che l'elemento corrente viene rimosso dal layout della pagina e non influenza più gli elementi che lo circondano. In una serie di immagini flottate, usare questo metodo significa mostrare un'immagine alla volta. Vediamo come.
Partiamo da questa struttura HTML:
<div id="slideshow">
<div id="slideshow-wrapper">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
</div>
</div>
Con i seguenti stili CSS:
#slideshow {
margin: 2em auto;
width: 380px;
height: 250px;
position: relative;
border: 5px solid #313131;
overflow: hidden;
}
#slideshow-wrapper {
width: 1520px;
height: 250px;
position: relative;
background: #666;
}
#slideshow-wrapper img {
width: 380px;
height: 250px;
float: left;
}
Ora dobbiamo creare un timer ciclico che incrementi e resetti un contatore con cui andremo a selezionare l'immagine corrente tramite il metodo eq():
var Slider = new function() {
var index = -1;
var wrapper = $('#slideshow-wrapper', '#slideshow');
var images = $('img', wrapper);
var slide = setInterval(function() {
index++;
if(index == images.length) {
index = 0;
images.fadeIn();
}
images.eq(index).fadeOut(2000);
}, 2000);
this.init = function() {
slide();
};
}();
$(function() {
Slider.init();
});
Come si può notare, le immagini scompaiono in sequenza e l'una mostra l'altra che la segue. Quando il contatore raggiunge il limite posto dal numero di immagini, questo viene resettato e tutte le immagini vengono fatte riapparire di nuovo.
Potete visionare l'esempio finale in questa pagina.