jQuery div13數組

Question

如何使容器中的所有div元素逐漸淡入，而不會爲容器內的每個div設置延遲？

這是我工作的jQuery代碼：

 $("#a").animate({opacity: '1'}); 
     $("#b").delay(100).animate({opacity: '1'}); 
     $("#c").delay(200).animate({opacity: '1'}); 
     $("#d").delay(300).animate({opacity: '1'}); 
     $("#e").delay(400).animate({opacity: '1'}); 

小提琴：http://jsfiddle.net/f9poom60/2/

現在，如果我想補充一個div，我要在我的JavaScript延遲添加它，我必須將它添加到CSS中。我很確定它可以用更簡單的方式完成。你可以做到這一點

Answer 1

$(document).ready(function(){ 
    $('.container .some-div').each(function(i){ 
     $(this).delay(i*500).animate({opacity: 1},1000); 
    }); 
}); 

DEMO HERE

Answer 2

Working Example

的一種方法是使用一個each()循環，淡入他們：

在這裏你去：

$(document).ready(function() { 
    $('#word1, #word2, #word3, #word4, #word5').each(function(fadeInDiv){ 
    $(this).delay(fadeInDiv * 500).fadeIn(1000); 
    }); 
}); 

注意我提供一個參數， fadeInDiv，這將爲三個元素(returns 0, 1, 2)中的每一個遞增並且將其乘以延遲，因此您將獲得相應的延遲遞增(0, 500, 1000)等。

Answer 3

簡單遍歷這個類，用指數來設定延遲

$('.some-div').each(function (i) { 
    $(this).delay(i * 100).animate({ opacity: '1'}); 
}); 

DEMO

Answer 4

一個更好的辦法來做到這一點會使用jQuery的.each()。這使您可以循環訪問.container的任何子項。更改400*index以加快或減慢延遲。

$(".container").children().each(function(index) { 
    $(this).delay(400*index).animate({opacity:'1'},100); 
}); 

JS FIDDLE