Как сделать ячейки меняют цвет по одному, а не сразу?

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++; 
};