jQuery: usare la coda di animazioni per scomporre gli elementi

Onestamente avevo sinora usato pochissimo i metodi di jQuery per creare code di animazioni, ma grazie all'intervento di Francesco ho cominciato a studiare a fondo le possibilità offerte dai metodi queue() e dequeue() di jQuery. In questo articolo vorrei proporre una loro possibile applicazione alla scomposizione degli elementi con animazioni.

Partiamo da questo elemento, suddiviso in quattro elementi discendenti:

<div id="box">
    <div class="part p1"></div>
    <div class="part p2"></div>
    <div class="part p3"></div>
    <div class="part p4"></div>
</div>​

Vengono applicati i seguenti stili CSS:

#box {
    margin: 2em auto;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

div.part {
    position: absolute;
    width: 50px;
    height: 50px;
    background: silver;
}
.p1 {
    top: 0;
    left: 0;
}

.p2 {
    top: 0;
    right: 0;
}

.p3 {
    bottom: 0;
    left: 0;
}

.p4 {
    bottom: 0;
    right: 0;
}
​

Vogliamo creare l'effetto per cui quando l'utente clicca sul box le sue quattro parti si dissolvano una per una. Ecco come possiamo fare utilizzando le code di animazioni:

$(function() {
    
    $('#box').click(function() {

        var $box = $(this);

        $('div.part', $box).each(function(i, part) {

            $box.queue('fade', function(next) {
                
                  $(part).fadeOut(250, next);                    
            });
                

        });

        $box.dequeue('fade');            

    });        
    
});​

Il metodo queue() accetta due parametri: il nome della coda di animazioni creata e la funzione da invocare su ogni animazione. A sua volta questa funzione anonima accetta come parametro un riferimento a se stessa. Per cui ad ogni iterazione del loop sugli elementi la funzione andrà ad usare l'elemento successivo del set applicandogli il metodo fadeOut().

Quando il ciclo è finito, usiamo il metodo dequeue() per resettare la coda di animazioni utilizzando nel nostro caso il nome di tale coda. Potete visionare l'esempio finale in questa pagina.