jQuery: effetti di dissolvenza avanzati

jQuery non dispone di metodi di scomposizione delle animazioni tali da poter creare un effetto di dissolvenza avanzato. Quello che vogliamo ottenere è la progressiva scomparsa di un elemento, pezzo dopo pezzo. Per ottenere questo effetto dobbiamo materialmente sovrapporre degli elementi vuoti all'oggetto da far scomparire e quindi operare su ciascuno di essi. Vediamo come.

Partiamo da questa struttura HTML:

<div id="img">
	<img src="img14.jpg" />
</div>

Vogliamo che l'immagine scompaia un pezzo alla volta. Dovremo quindi creare 100 elementi vuoti con delle dimensioni in percentuale in modo da potersi adattare a qualsiasi dimensione. Prepariamo quindi il codice CSS:

#img {
    width: 550px;
    height: 330px;
    margin: 2em auto;
    position: relative;
}

#img img {
    display: block;
    position: absolute;
}

div.piece-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

div.piece {
    width: 10%;
    height: 10%;
    background: #fff;
    float: left;
    display: none;
}
​

Gli elementi vuoti e il loro contenitore sono sopra l'immagine per via del posizionamento, ma non influiscono inizialmente sul layout in quanto nascosti. Ciascun blocco ha un colore di sfondo: questo gli permetterà di coprire l'immagine.

Con jQuery useremo la concatenazione delle animazioni per il nostro scopo:

var sliceImage = function(target) {

    target = $(target);
    var i, len = 100,
        delay = 0;

    $('<div class="piece-wrapper"/>').
    appendTo(target);

    for (i = 0; i < len; i++) {

        $('div.piece-wrapper', target).
        append('<div class="piece"></div>');

    }



    $('div.piece-wrapper', target).show();
    $('div.piece', target).each(function() {

        $(this).queue('show', function(next) {

            $(this).delay(delay).show(15, next);

        });

        $(this).dequeue('show');

        delay += 10;

    });


};


setTimeout(sliceImage('#img'), 2000);