如何使细胞一次改变一个颜色，而不是一次改变所有颜色

How do I make the cells change colour one at a time rather than all at once?

本文关键字：一次 改变 有颜色 颜色 何使 一个 细胞      更新时间：2023-09-26

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

您可以使用 CSS 关键帧动画来执行此操作吗？您需要找出所有计时，然后对每个单元格的背景颜色进行动画处理，以更改为所需的颜色并再次返回。W3有一个关于它的好页面。

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

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

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

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

将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++;
};
相关文章：