Question

我想隐藏并使用与此代码类似的内容逐个显示div：

$.each(divs, function(index,value){
    $("#id").append(divs[index]).hide().show();
});

这个问题是div同时附加了所有（这不是我假装的）。怎么可以做到这一点？

Answer 1

使用.delay()。 i*500将为每个项目添加500ms延迟。要淡化它们，请使用.fadeIn()代替.show()。

$.each(divs, function(i,element){
    $("#id").append($(element).hide().delay(i*500).fadeIn());
});

演示：

＆＃13;

var divs = $('#hidden > div');
$.each(divs, function(i,element){
    $("#id").append($(element).hide().delay(i*500).fadeIn());
});

＆＃13;

#hidden { display: none }
#id > div {
  width: 15px;
  height: 15px;
  margin: 0 5px 5px 0;
  padding: 10px;
}
#id > div:nth-child(even) {
  background-color: #efefef;
}
#id > div:nth-child(odd) {
  background-color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hidden">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
<div id="id"></div>

＆＃13;

Answer 2

试试这个：

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

尝试将你想要逐一显示的div放到一个id为父级的div中，另一个用于class .child，这样可以正常工作

LIVE DEMO

褪色div一个接一个

2 个答案: