如何让细胞一次改变颜色而不是一次改变颜色？

Question

所以，我有这个网格，我需要按照特定的顺序让单元格“亮起”我已经设法让它们改变为我需要的颜色，但它们都会同时改变颜色。我还需要它循环，例如第一个变为黄色然后变回灰色，然后它不再变化，直到所有其他单元格循环通过。我需要的订单是黄色，绿色，蓝色，白色，橙色。

Answer 1

您可以使用CSS关键帧动画执行此操作吗？您需要弄清楚所有时间，然后为每个单元格背景颜色设置动画以更改为所需的颜色，然后再返回。 W3有一个很好的页面。

Answer 2

为每个单元格创建一个setInterval个人。修改你的函数changeCol()，这样就需要一个cel（而不是遍历每个单元格）。

然后创建一个foreach循环，为每个单元格调用设置setTimeout()函数后的间隔。

关键是在稍微不同的时间为每个单元格启动setInterval()。这就是您使用setTimeout(fn(), i*delay)。

的原因

//for each cell {
    setTimeout((setInterval(changeCol(), 1000)), i*delay);
//}

Answer 3

将您的changeCol更新为以下内容..您可以使用值100来设置setTimeout的延迟

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