在窗口加载时逐渐淡化元素

Question

我正在寻找在代码顺序中以特定类别淡入div，每次淡入淡出可能是最后一次250ms后，给人一种渐进式页面加载的印象。

我这个远在曾经的一切褪色...

$(window).load(function(){ 
    $('div.fade_this_please').fadeIn(4000); 
}); 

，但我不知道在那里我通过每个DIV将周期和当对方是完全消除它。

有人可以指出我正确的方向！？

任何意见赞赏！

Answer 1

这将所有div都放到视图中，每个div都有250ms的延迟。我建议减少褪色时间为每秒2秒，最多4秒似乎waaay太长，并可能会惹恼人们;-)

$(window).load(function() { 
    $('div').each(function(i) { 
     $(this).delay((i + 1) * 250).fadeIn(2000); 
    }); 
}); 

Answer 2

尝试

$('div.fade_this_please').fadeIn(4000).delay(250); 

或

jQuery(function($){ 
var e = $('div.fade_this_please'); 
e.fadeIn(); 
e.queue(function(){ 
    setTimeout(function(){ 
    e.dequeue(); 
    }, 250); 
}); 
}); 

reference

Answer 3

您可以遍历它们并设置fadeIn()之前的延迟：

$(window).load(function(){ 
    var delay = 0; 
    $('div.fade_this_please').each(function(){ 
     $(this).delay(delay).fadeIn(4000); 
     delay += 250; 
    }); 
});