网格中灯光顺序的Javascript问题

我很难让我制作的网格上的灯光一个接一个地出现。目前所有的灯一下子都亮了，但我不知道如何让盒子一个接一个地亮起来

我已将代码粘贴到下面：

html:

脚本：

  $(document).ready(function(){

    var colourinfo = {
        square1id: [
                    '#000000'
                    ],

        square2id: [
                    '#ffffff'
                    ],
        square3id: [
                    '#FFE600'
                    ],
        square4id: [
                    '#FFE600'
                    ],          
        square5id: [
                    '#FFE600'
                    ],
square6id: [
                    '#FFE600'
                    ]                   

    };

    var count = 0;

    var changecol = function(){
        $.each(colourinfo, function(tileid, colarray){
           $('#'+tileid).css('background-color', colarray[count%colarray.length]);
        }); 
        count++;
    };

    setInterval(changecol, 1000);
});

---

如果您能就此提供任何建议，我将不胜感激。感谢基本问题是，当第一次调用

changecol

时，它会在

colorinfo

数据结构中循环，并在第一次执行时应用所有颜色

我做到了我认为你现在想做的，也许你下一步打算做的。它通过一系列颜色循环每个节点，每100ms一次循环一种颜色

 body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

.container{
    overflow:hidden;
    width:860px;
    margin-left:250px;
    margin-top:20px;
}
.box{
    width:210px;
    height:120px;
    float:left;
    background-color:#4D4D4D;
    margin-bottom:3px;
}

.spacing{
    margin-right:3px;
}

  $(document).ready(function(){

    var colourinfo = {
        square1id: [
                    '#000000'
                    ],

        square2id: [
                    '#ffffff'
                    ],
        square3id: [
                    '#FFE600'
                    ],
        square4id: [
                    '#FFE600'
                    ],          
        square5id: [
                    '#FFE600'
                    ],
square6id: [
                    '#FFE600'
                    ]                   

    };

    var count = 0;

    var changecol = function(){
        $.each(colourinfo, function(tileid, colarray){
           $('#'+tileid).css('background-color', colarray[count%colarray.length]);
        }); 
        count++;
    };

    setInterval(changecol, 1000);
});