Question

这是我的整个代码..我想要做的是 - 。当DOM准备好时，第一个div显示在页面上，第二个显示在延迟之后，然后是第三个，依此类推，最多150个。

当前代码的问题在于，在一小段延迟之后，整个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>

Answer 1

你所面临的问题，没有人提到过，jQuery delay()只能链接到fx队列。因此，在hide()之后使用它将无效。使其正常工作的快速解决方法是使用效果代替hide()，即：

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

Answer 2

尝试使用为index的每次迭代自动分配的each参数，以线性方式延长延迟：

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

此外，根据您的评论，应更改div元素的样式以隐藏它们：

.dashdiv {
    display:none;
    ...
}

Answer 3

您可以使用：

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/

Answer 4

这是一种仅在前一个div完成后延迟和淡出div的方法。它使用fadeIn回调移动到数组中的下一个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/

使用jquery逐个加载div并延迟

4 个答案: