javascript - 快速改变css属性值？

Question

我有示例代码:

<div></div>
<button>
Go
</button>

div {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
$('button').click(function() {
    for (var i = 0; i < bgs.length; i++) {
    $('div').css('background-color', bgs[i]);
  }
});

https://jsfiddle.net/e4jhwtyc/2/

我想要实现的是，当用户单击“Go”按钮时，用户将能够看到背景非常快速地从红色、蓝色、黄色、绿色，然后黑色变化。但当单击“Go”按钮时，我得到的只是黑色。我错过了什么吗？

Answer 1

您需要设置一些超时才能看到颜色的变化，否则它会发生得太快。

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
$('button').click(function() {
    for (var i = 0; i < bgs.length; i++) {
    setTimeout(function(){
      $('div').css('background-color','').css('background-color', bgs[i]);
    }, 1000);
  }
});