jquery - $(element).each(...) 内で fadeTo を使用するにはどうすればよいですか

Question

いくつかの div があり、jquery の各メソッドを使用して div をループ処理し、各 div に個別に効果を適用したいと考えています。より明確にするために、ダイブを 0.5 (不透明度) にフェードし、次に遅延 (300) にフェードしてから 1 (不透明度) に戻したいのですが、各 div で 1 つずつそうする必要があります。どなたか正しい方法を教えてください。ありがとう。

コードはフィドルにあります。

Answer 1

var obj = $('.box');
var i = 0;
LoadSequence();

//recursive for all the items.
function LoadSequence() {
    obj.eq(i++).fadeTo('1000', 0.1).delay(300).fadeTo('1000', 1, LoadSequence);
};
​

フィドル: http://jsfiddle.net/NHdB6/6/

Answer 2

少し前に小さなプラグインを作りました。これは役立つかもしれません：

デモ: http://jsfiddle.net/elclanrs/9Zxew/

(function ($) {
    $.fn.fade1by1 = function (options) {
        var opt = $.extend({
                'delay' : 500,
                'speed' : 500,
                'ease' : 'swing' // Other requires easing plugin
            }, options);
        var that = this;
        for (var i = 0, d = 0, l = that.length; i < l; i++, d += opt.delay) {
            that.eq(i).delay(d).fadeIn(opt.speed, opt.ease);
        }
    };
})(jQuery);

Answer 3

シーケンシャルな性質を保証するため、複数の異なる調整タイマーよりもアニメーション完了関数を使用する方が良いと常に考えています。これが私がそれを行う方法です：

function fadeElementsSequential(selector) {
    var elems$ = $(selector);
    var i = 0;
    function next() {
        if (i < elems$.length) {
            elems$.eq(i++).fadeTo(1000, 0.5).delay(300).fadeTo(1000, 1, next);
        }
    }
    next();
}

fadeElementsSequential(".box");

これが実際のデモです: http://jsfiddle.net/jfriend00/BW6YF/

注: デモでは、もう少し見やすくするために不透明度の値を変更しました。