Question

我正在尝试创建一个函数，将div的背景更改为数组中的颜色。我做了以下事情：

HTML：

<div class="background">

的CSS：

    .background {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background-color: #000;
    }

使用Javascript：

    function spectrum() {
        var time = 0;
        var colours = ['green', 'blue', 'red'];
        var hue = colours[time];


        $('.background').animate({
            backgroundColor: hue
        }, {
            duration: 1000,
            complete: function () {
                time += 1;
    spectrum();
            }
        });
    };

问题是我无法像递归一样使用，它会改变背景并停止......我在这里做错了什么???

我试图找到一个可以使用的代码，但只是找到CSS3，我想支持IE8。

任何人都知道做我想做的事情的好方法吗？

谢谢！

Answer 1

试试这个：

 $('.background').css({
 transition: 'background-color 1s ease-in-out',
 "background-color": "red" });

Answer 2

问题是我无法像递归一样使用它会改变背景一旦停止......我在这里做错了什么???

var time = 0;

在每次调用time时将0定义为spectrum，导致time += 1; .animation() complete函数未在递归时应用spectrum {1}}来电。

要应用彩色动画效果，请尝试使用jQuery Color

＆＃13;

function spectrum(t) {
 
      var colours = ["green", "blue", "red"];
      var time = t && t < colours.length ? t : 0;
      var hue = colours[time];

      $(".background").animate({
        backgroundColor: hue
      }, {
        easing: "linear",
        duration: 1000,
        complete: function() {
          time += 1;
          // recursively call `spectrum`,
          // with `time` as argument
          spectrum(time);
        }
      });
    };
    spectrum();

＆＃13;

.background {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js">
</script>
<div class="background"></div>

＆＃13;

Answer 3

对不起所有颜色，你可以这样做：

    function  spectrum(){
    var  mcolors = ['green', 'blue', 'red'];
    var time = 500;             
    $.each(mcolors, function(index, value){
    setTimeout( function(){ 
$('.background').css({
    transition: 'background-color 1s ease-in-out',
    "background-color": value
    }); }, time)
    time += 1000;
    });}

如何使用jquery动画更改背景颜色，如过渡

3 个答案: