Question

因此，我尝试使用动画更改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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

DEMO via Liveweave.com

Answer 2

如前所述，jQuery不支持颜色动画，但我想如果你成功地使用了后面的例子，你就会使用jQuery UI之类的插件。

jQuery的animate来电是通过管道传输的，所以在添加新动画之前，您无需等待上一个动画的结束。一旦动画结束，下一个动画就会开始。

你后面的例子是OK 除了你正在以比实际消耗更快的方式管理新动画：你的4个动画需要3 x 4 = 12秒才能完成，而你每3秒增加一个回合。因此，您将得到一个非常长的动画队列，这将不必要地使用越来越多的内存。这是一个修复：

没有数组和jQuery UI。

您可以通过将bgChange作为complete回调提供给上次animate来电，而不是在动画结束时计算自己。

＆＃13;

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

＆＃13;

#box{
  height: 50px;
}

＆＃13;

<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>

＆＃13;

使用数组和jQuery UI。

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

＆＃13;

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

＆＃13;

#box{
  height: 50px;
}

＆＃13;

<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>

＆＃13;

使用CSS动画（首选方法）。

使用css动画而不是jQuery animate更有效。你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

您可能需要为某些浏览器添加css前缀（例如，-webkit-用于Safari的旧版本。）

使用CSS过渡。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

此外，您可能希望使用-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（）的参数。动画结束后将调用此函数。

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

3 个答案: