使用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延迟

回答

相关问题