javascript - FadeIn 没有给出适当的时机

Question

我有 3 个 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

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

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);

Answer 2

delay如果它不是第一个 div，则使用：

blockInner.each(function (index, value) {
    $(this).delay(index > 0 ? 2000*index : 0).fadeIn(2000);
});

http://jsfiddle.net/TUL6s/5/