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>

通过 Liveweave.com 演示

Answer 2

如前所述，jQuery不支持彩色动画，但我想如果你成功地让它与后面的例子一起工作，你正在使用一个插件，如jQuery UI。

jQuery 的 animate 调用是通过管道进行的，因此您不必等待上一个动画的结束才添加新的动画。动画结束后，下一个动画将开始。

后面的示例还可以，除了您管道新动画的速度比实际消耗的速度快：您的 4 个动画需要 3 x 4 = 12 秒才能完成，而您每 3 秒添加一轮。结果，您最终将得到一个很长的动画队列，这将不必要地使用越来越多的内存。这是一个修复程序：

没有数组，有jQuery UI。

与其自己计算动画应该何时结束，不如通过提供bgChange作为上次animate调用的complete回调来做得更好。

$(document).ready(function() {
  function bgChange(){
    $('#box')
      .animate({ backgroundColor: 'red' }, 3000)
      .animate({ backgroundColor: 'yellow' }, 3000)
      .animate({ backgroundColor: 'blue' }, 3000)
      .animate({ backgroundColor: 'black' }, {
         duration: 3000,
         complete: bgChange // Loop !
      });
  }
  // Start the animation.
  bgChange();
});

#box{
  height: 50px;
}

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

带有数组和 jQuery UI。

如果你想使用数组，我会做这样的事情：

$(document).ready(function(){
  var array = ["red", "blue", "yellow", "black"];
  var box = $("#box");
  function bgChange(){
    // Create all animations.
    array.forEach(function(color){
      box.animate({
        "background-color": color
      }, 3000);
    });
    // box.promise() returns a promise resolved when all box's animations
    // are finished (i.e. then's callback will be called).
    return box.promise().then(bgChange);
  }
  // Start !
  bgChange();
});

#box{
  height: 50px;
}

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

使用 CSS 动画(首选方法(。

使用

css 动画比使用 jQuery animate 更有效。您可以执行以下操作：

#box{
    height: 50px;
    animation: background 9s infinite;
    animation-timing-function: linear; /* though you may choose another easing function */
}
@keyframes background {
    0%   {background-color: red;}
    25%  {background-color: blue;}
    75%  {background-color: yellow;}
    100% {background-color: red;}
}

<div id="box"></div>

您可能需要为某些浏览器添加 css 前缀(即 -webkit-适用于 Safari 的旧版本(。

使用CSS过渡。

如果你仍然希望不同的颜色被javascript控制，你也可以使用CSS过渡。

$(document).ready(function(){
  var colors = ["red", "blue", "pink", "yellow"];
  var box = $("#box");
  var current = 0;
  function bgChange(){
    box.css("background-color", colors[current]);
    current = (current + 1) % colors.length;
  }
  // Goes to next background each time a transition ends
  // (i.e. current background has finished to fade in).
  box.on("transitionend", bgChange);
  // Launch the first animation.
  bgChange();
});

#box{
  height: 50px;
  transition: background-color 3s linear; /* once again it does not have to be linear */
}

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

再一次，您可能希望使用-webkit-transition规则并侦听-webkit-transitionend事件，因为 Safari 刚刚发布了他的非前缀动画支持。

Answer 3

$(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, bgchange);
}
bgchange();

});

如果将函数名称添加为 animate(( 的参数。此函数将在动画结束后调用。