javascript - FadeIn 没有给出正确的时间

Question

我有 3 个 div，我想将每个 div 间隔 1 秒显示。但这似乎并没有发生。循环中实际发生了什么。请解释一下!!目前所有div都出现在一起。但我想一次向他们展示一个。 我希望第二个 DIV 在第一个 div 出现后出现。

http://jsfiddle.net/wilsonrufus/TUL6s/

var blockOne = $('#block1');
blockInner = blockOne.find('.inner-block');
blockInner.fadeOut();

blockInner.each(function (index, value) {
    time = 2000+(index*5000);  <- just expermenting
    $(this).fadeIn(time);
    console.log(time)
});

Answer 1

尝试链接并使用回调函数来处理下一个元素的每次淡入

http://jsfiddle.net/blackjim/TUL6s/1/

var blockOne = $('#block1');
blockInner = blockOne.find('.inner-block');

var fadeNextIn = function(){
    if($(this).next()){
        $(this).next().fadeIn(1000,fadeNextIn);
    }
}

blockInner.fadeOut('slow')
          .first().fadeIn(1000,fadeNextIn);