淡入未给出正确的时间

FadeIn is not giving proper timing

本文关键字：时间 淡入      更新时间：2023-09-26

我有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)
});

尝试链接并使用回调函数来处理下一个元素的每次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);

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

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

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

相关文章：