使用jquery一個接一個地加載div延遲

這是我的整個代碼。我正在試圖做的是讓 - 。當DOM準備好時，第一個div顯示在頁面上，第二個顯示在延遲後，然後是第三個，依此類推直到150.使用jquery一個接一個地加載div延遲

與當前代碼有關的問題是，整個150 div在短暫延遲後立即加載。

My code -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Test for dashed div</title> 
<style type="text/css"> 
.dashdiv 
{ 
    width: 150px; 
    height: 50px; 
    background: #ae2d3e; 
    float:left; 
    box-shadow: 10px 10px 6px #d4a7b0; 
    margin: 5px; 
} 
</style> 
</head> 
<body> 
    <?php 
    for($i =0; $i < 150; $i++) 
    { 
    ?> 
    <div class="dashdiv"> 
    This is a div text 
    </div> 
    <?php 
    } 
    ?> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('div.dashdiv').each(function() 
    { 
      $(this).hide().delay(1000).fadeIn(1850); 
    }); 
}); 
</script> 
</body> 
</html>

來源

2013-04-02 swapnesh

這是任何人提到你面臨的問題，是jQuery的delay()僅在一個FX隊列可鏈接。因此，在hide()之後使用它將不起作用。速戰速決得到它的工作將是到位的hide()要使用的效果，即：

$('div.dashdiv').each(function(i) { 
    $(this).fadeOut(0).delay(1000*i).fadeIn(1850); 
});

來源

2013-04-02 23:01:10 wes

這裏是一個小提琴：http：// jsfiddle。net/vDLA7/ – wes

非常好的一點提出+1 :) – swapnesh

嘗試使用index參數自動分配爲each每次迭代擴展以線性方式延遲：

$('div.dashdiv').each(function(i) { 
    $(this).delay(1000*i).fadeIn(1850); 
});

同樣，遵從您的評論中， div元素的樣式應改爲隱藏：

.dashdiv { 
    display:none; 
    ... 
}

來源

2013-04-02 19:21:51 Boaz

的代碼唯一的問題是在一次全150個格在首次加載，然後淡出，然後開始通過添加一個一個 – swapnesh

@swapnesh跟着你的例子。爲了實現你所描述的，只需在'.dashdiv'的樣式規則中添加'display：none'即可。這也意味着'hide（）'方法在這裏是多餘的。 – Boaz

@swapnesh按照編輯的答案。 – Boaz

您可以使用：

HTML：

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

的jQuery：

$('#parent .child') 
    .hide() 
    .each(function(index){ 
     var _this = this; 
     setTimeout(function(){ $(_this).fadeIn(); }, 5000*index); 
    });

演示在http://jsfiddle.net/gaby/eGWx9/1/

來源

2013-04-02 19:24:50

這裏有延遲的方式和淡入一個div只有一次以前div已完成。它使用淡入回調移動到下一格數組中：

// hide all 
$('.dashdiv').hide(); 

// fade in each div one by one 
divs = document.getElementsByClassName('dashdiv'); 
(function fade(i){ 
    if(i < divs.length){ 
     $(divs[i]).delay(1000).fadeIn(1850, function(){ 
      fade(++i); 
     }); 
    } 
})(0);

或者沒有getElementsByClassName。

// hide all 
$('.dashdiv').hide(); 

// fade in each div one by one 
(function fade(i){ 
    if(i < $('.dashdiv').length){ 
     $($('.dashdiv')[i]).delay(1000).fadeIn(1850, function(){ 
      fade(++i); 
     }); 
    } 
})(0);

演示：http://jsfiddle.net/louisbros/RdxS6/

來源

2013-04-02 19:54:03 louisbros

如果你已經使用jQuery fadeIn函數，使用vanilla JS'document.getElementsByClassName'有什麼意義？ –

它爲什麼重要？如果你願意，你可以很容易地使用$（'。dashdiv'）。對我來說它更具可讀性。 – louisbros

**重要**。這就是所謂的一致性。當你作爲一個團隊的一員工作時，你會學會不要用「對我」的思維來思考。你已經在使用一個庫來坐在你和JS功能之間。如果不需要直接使用JS函數，則不要。用JS編寫所有東西當然是不同的故事。所以@DiH是對的，這不是「爲什麼不？」的問題。這是一個「爲什麼？」的問題。 – Adi

使用jquery一個接一個地加載div延遲

回答

相關問題