逐步加载 div(淡入)

Question

我做了一个html页面。我想使用 jQuery 在页面中逐步加载，但我不知道这样做。

我的网页代码：

<div class="main-template">
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
</div>

淡入连拍！

Answer 1

尝试如下：

$(function(){
$('.main-child').hide();
$('div.main-child').each(function(i){
$(this).delay(i*800).fadeIn('slow');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-template">
<div class="main-child">1</div>
<div class="main-child">2</div>
<div class="main-child">3</div>
<div class="main-child">4</div>
<div class="main-child">5</div>
<div class="main-child">6</div>
<div class="main-child">7</div>
<div class="main-child">8</div>
<div class="main-child">9</div>
<div class="main-child">10</div>
<div class="main-child">11</div>
<div class="main-child">12</div>
<div class="main-child">13</div>
<div class="main-child">14</div>
<div class="main-child">15</div>
<div class="main-child">16</div>
</div>

Answer 2

试试这个

$('.main-child').each(function(i) {$(this).fadeOut(0).delay(1000*i).fadeIn(1850);});

这里是JsFiddle

Answer 3

也许是这样的东西？我们使用.each()遍历所有元素，并设置一个时间取决于索引i的setTimeout()。

$(".main-child").each(function (i) {
var element = $(this); 
setTimeout(function() { 
element.animate({"opacity": 1}, 500);
}, 200*i);
});

.main-child{
width: 100%;
height: 20px;
background-color: red;
opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-template">
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
<div class="main-child"></div>
</div>