jquery - 我如何在 $(element).each(...) 中使用 fadeTo

Question

我有一些 div，我想使用 jquery 的每种方法来循环遍历 div，并希望一个接一个地在每个 div 上单独应用效果。更清楚地说，我想将潜水淡化到 0.5（不透明度），然后延迟（300），然后再次淡入淡出 1（不透明度），但我希望每个 div 一个接一个地这样做。谁能告诉我正确的方法。谢谢。

代码很麻烦。

Answer 1

不久前我做了一个小插件。这可能会有所帮助：

演示：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 2

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 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/

注意：我在演示中更改了不透明度值只是为了让它更明显一点。