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

Question

I'm trying to create a function that changes the background of a div to colors that are within an array. I did the following:

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

The problem is that I am unable to use like a recursion, it changes the background once and stops... What am I doing wrong here???

I tried to find a code ready to use, but just find CSS3, and I want to give support for IE8.

Anyone knows a good way to do what i am trying to do?

Thanks!

Please refer to this: [jQuery animate backgroundColor][1]` [1]: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — renakre, Apr 01 '15 at 01:25

score 1 · Answer 1 · answered Apr 01 '15 at 00:13

1

Try this:

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

answered Apr 01 '15 at 00:13

Max D

815
7
10

guest271314 · Answer 2 · 2015-04-01T03:13:45.143

1

The problem is that I am unable to use like a recursion, it changes the background once and stops... What am I doing wrong here???

var time = 0;

defines time as 0 at each call of spectrum, resulting in time += 1; at .animation() complete function not being applied at recursive spectrum calls.

For applying a color animation effect, try utilizing 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>

edited Apr 01 '15 at 03:13

answered Apr 01 '15 at 00:29

guest271314

1
15
104
177

`jquery`, `jqueryui` loaded , defined ? Tried ie11 ? – guest271314 Apr 01 '15 at 01:19
IE11 is ok, but 8 not so much haha – Apr 01 '15 at 01:22
Have not viewed `jqueryui` source to determine how `color` animations are implemented, if `css` `transitions` utilized. Appear `css` `transition` supported at ie10+ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions – guest271314 Apr 01 '15 at 01:24
@DRX See updated post. Substituted jQuery Color for full jQuery UI. `css` `transition` not appear utilized to color implement effects. – guest271314 Apr 01 '15 at 03:15

score 0 · Accepted Answer · answered Apr 01 '15 at 00:27

Sorry with all colors you can do this:

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

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

3 Answers3