加載div（淡入）一步一步

我製作一個html頁面。我想用jQuery在頁面中一步一步加載，但我不知道做到了。加載div（淡入）一步一步

我的HTML代碼：

<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>

淡入序列爆了！

來源

2017-07-08 Sushiant

嘗試象下面這樣：

$(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>

來源

2017-07-08 07:10:23 lalithkumar

你檢查嗎？ @Sushiant – lalithkumar

工作吧......坦克吧 – Sushiant

試試這個

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

這裏是JsFiddle

來源

2017-07-08 07:08:01

也許這樣的事情？我們使用.each()遍歷所有元素，並設置setTimeout()，時間取決於索引i。

$(".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>

來源

2017-07-08 07:08:40

加載div（淡入）一步一步

回答

相關問題