Question

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

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

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

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

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

FadeIn没有给出适当的时机

2 个答案: