jQuery: effetto di dissolvenza in sequenza su un gruppo di elementi

Quando abbiamo un gruppo di elementi possiamo creare un effetto di dissolvenza in sequenza su ciascuno di essi utilizzando una semplice tecnica jQuery che fa uso del metodo delay(). Vediamo insieme i dettagli.

Il codice è il seguente:

(function ($) {
    $.fn.fadeAll = function (options) {
        var opt = $.extend({
                delay : 500,
                speed : 500,
                ease : 'linear'
            }, options);
        var that = this;
        for (var i = 0, d = 0, l = that.length; i < l; i++, d += opt.delay) {
            that.eq(i).delay(d).fadeOut(opt.speed, opt.ease);
        }
    };
})(jQuery);

Esempio d'uso:

$('div.box').fadeAll({speed: 800});