如何让阵列一次显示一个延迟？

Question

  

每个div显示为一个块，我想要它们   在页面准备就绪时开始显示

<div id="blocks">


</div>

在这里输入代码

var mainArray = new Array();

mainArray[0] = "<div class='tile'> </div>"
mainArray[1] = "<div class='tile'> </div>"
mainArray[2] = "<div class='tile'> </div>"
         //adds to #blocks
for (var i = 0; i < mainArray[i].length; i++) {
$('#blocks').append(mainArray[i])
};

Answer 1

尝试使用setTimeout（）

var mainArray = new Array();

mainArray[0] = "<div class='tile'>1</div>"
mainArray[1] = "<div class='tile'>2</div>"
mainArray[2] = "<div class='tile'>3</div>"
//adds to #blocks
for (var i = 0; i < mainArray.length; i++) {
    (function(idx){
        setTimeout(function(){
            $(mainArray[idx]).hide().appendTo('#blocks').fadeIn()
        }, idx * 2000)
    })(i)
};

演示：Fiddle