Creare una progressione nelle animazioni è alquanto semplice con jQuery. Possiamo combinare questa progressione con la navigazione mel DOM per creare l'effetto di comparsa progressiva in una sequenza di elementi. Vediamo come.
Partiamo da questa struttura HTML:
<div id="content">
<div id="box-1">...</div>
<div id="box-2">...</div>
<div id="box-3">...</div>
</div>
Inizialmente solo il primo box è visibile. Quando facciamo clic su un box deve essere mostrato il box successivo e quando si arriva sull'ultimo box occorre ripristinare lo stato iniziale:
$(function() {
$( 'div', '#content' ).on( 'click', function() {
var $div = $( this );
if( $div.next().length ) { // esiste un elemento successivo ?
$div.next().
slideDown( 'normal' );
} else { // ultimo elemento
$div.parent().
find( 'div' ).
not( ':first' ).
slideUp( 'normal' );
}
});
});