javascript - div 逐一淡入淡出

Question

我想使用类似于此代码的内容来隐藏和显示 div，一一对应到 #id:

$.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());
});

演示:

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

#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;
}

<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>