1

这是我的全部代码..我想做的是拥有-。当 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>
4

4 回答 4

8

您面临的问题是，没有人提到，jQuerydelay()只能在 fx 队列上链接。所以，以后使用它是hide()行不通的。使其工作的快速解决方法是使用效果代替hide()，即：

$('div.dashdiv').each(function(i) {
  $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});
于 2013-04-02T23:01:10.353 回答
5

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

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

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

.dashdiv {
    display:none;
    ...
}
于 2013-04-02T19:21:51.837 回答
2

您可以使用 ：

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-02T19:24:50.613 回答
0

这是一种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/

于 2013-04-02T19:54:03.160 回答