如何使细胞一次改变一种颜色而不是一次改变颜色？答案

【问题标题】：How do I make the cells change colour one at a time rather than all at once?如何使细胞一次改变一种颜色而不是一次改变颜色？
【发布时间】：2016-01-31 04:51:31
【问题描述】：

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

【问题讨论】：

您可以在当前setInterval 中为每种颜色使用不同间隔的setTimeout...

标签： javascript html css

【解决方案1】：

您可以使用 CSS 关键帧动画来做到这一点吗？您需要计算出所有时间，然后为每个单元格的背景颜色设置动画以更改为所需的颜色并再次返回。 W3 有一个很好的页面。

【讨论】：

【解决方案2】：

为每个单元格创建一个setInterval 个人。修改您的函数changeCol()，使其需要一个 cel（而不是循环遍历每个单元格）。

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

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

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

【讨论】：

【解决方案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++;
};

【讨论】：