Javascript 更改背景颜色功能不起作用

Question

所以我尝试使用 animate 更改 div 的背景颜色，以便背景颜色逐渐变化而不是立即变化。

我已经尝试了下面的这段代码，但无济于事，我觉得这将是构建代码的最佳方式，但它就是行不通。

$(document).ready(function() {

   var array = ["red", "pink", "orange", "black"];

   var counter = 0;
   var nextColor;

   function bgchange() {
     counter = (counter + 1) % array.length;
     nextColor = array[counter];

     $("#box").animate({
       background - color: nextColor
     }, 3000);

   }

   setInterval(bgchange, 3000)


 });

我终于使用了不同的方法来完成这项工作，但似乎并没有 光看就超有效率

$(document).ready(function() {

  setInterval(function() {

    $('#box')
      .animate({ backgroundColor: 'red' }, 3000)
      .animate({ backgroundColor: 'pink' }, 3000)
      .animate({ backgroundColor: 'orange' }, 3000)
      .animate({ backgroundColor: 'black' }, 3000);
  }, 3000);

});

第二个示例有效，但是这段代码会进行多次回调以获得下一种颜色吗？我假设数组更好，但我不确定这里的最佳实践是什么，我的第一个示例是否可以修复以开始工作？

Answer 1

您可以通过 CSS 使背景颜色变淡 - 但不要忘记旧版浏览器不支持此功能。

http://caniuse.com/#feat=css-transitions

$(document).ready(function() {  
var colorArray = ["red", "pink", "orange", "black"];
var currentColorIndex = 0;
setInterval(function() {
$('#box').css('backgroundColor', colorArray[currentColorIndex]);
  currentColorIndex++;
}, 3000);
  
}); 

#box {
  background-color: #F5DEB3;
     -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">Examplecontent</div>

DEMO via Liveweave.com