在窗口加載時逐漸淡化元素

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