如何用jquery动画改变背景颜色，就像一个过渡

How change background-color with jquery animation, like a transition

本文关键字：一个 动画 jquery 何用 改变 背景 颜色      更新时间：2023-09-26

我正试图创建一个函数，将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。

有人知道做我想做的事的好方法吗？

谢谢！

试试这个：

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

问题是我不能像递归一样使用，它会改变背景一次，然后停止。。。我在这里做错了什么？？？

var time = 0;

在spectrum的每次调用中将time定义为0，导致.animation()的time += 1; complete函数在递归spectrum调用中不应用。

要应用颜色动画效果，请尝试使用jQuery color

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();
.background {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #000;
}
<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>

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

    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;
    });}
相关文章：