jQuery: effetto di dissolvenza sulle coppie di box HTML

Una settimana fa un mio lettore mi ha chiesto se conoscevo un plugin jQuery per creare un effetto di dissolvenza su dei box HTML presi a coppie. L'effetto doveva essere ciclico. Dato che non conoscevo nessun plugin di questo tipo (Cycle funziona prevalentemente sulle immagini) ne ho creato uno.

Il codice HTML è semplice:

<div class="fade-blocks-wrapper">
    <div class="fade-block">
        <div class="block">1</div>
        <div class="block">2</div>
    </div>
    <div class="fade-block">
        <div class="block">3</div>
        <div class="block">4</div>
    </div>
    <div class="fade-block">
        <div class="block">5</div>
        <div class="block">6</div>
    </div>
</div>

Useremo il posizionamento assoluto CSS per mettere i blocchi uno sopra l'altro. La proprietà z-index verrà regolata da jQuery:

.fade-blocks-wrapper {
    width: 560px;
    height: 180px;
    margin: 2em auto;
    position: relative;
    overflow: hidden;
}

.fade-block {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.fade-block .block {
    width: 250px;
    height: 100%;
    margin: 0 10px;
    background: #eee;
    float: left;
    line-height: 180px;
    text-align: center;
    font-size: 2em;
}

.fade-block:nth-child(2) .block {
    background: #666;
    color: #fff;
}

.fade-block:nth-child(3) .block {
    background: #ffc;
}

Con jQuery useremo i timer JavaScript per creare la dissolvenza ciclica:

(function($) {
    $.fn.rotator = function(options) {
        options = $.extend({
            blocks: '.fade-block',
            speed: 1000
        }, options);
        var setZIndex = function(element) {
                var index = $(options.blocks, element).length;
                $(options.blocks, element).each(function() {
                    index--;
                    $(this).css('zIndex', index);
                });
            };
        var rotate = function(element) {
                var blocks = $(options.blocks, element),
                    len = blocks.length,
                    index = -1;
                blocks.fadeIn(options.speed);
                var timer = setInterval(function() {
                    index++;
                    var block = blocks.eq(index);
                    if (index == len) {
                        clearInterval(timer);
                        rotate(element);
                    }
                    if (block.index() != (len - 1)) {
                        block.fadeOut(options.speed);
                    }
                }, options.speed);
            };
        return this.each(function() {
            var elem = $(this);
            setZIndex(elem);
            rotate(elem);
        });
    };
})(jQuery);

Quindi usiamo il plugin come segue:

$(document).ready(function() {
    $('div.fade-blocks-wrapper').rotator({
        speed: 2500
    });
});