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

i'm trying create function changes background of div colors within array. did 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 unable use recursion, changes background once , stops... doing wrong here???

i tried find code ready use, find css3, , want give support ie8.

anyone knows way trying do?

thanks!

sorry colors can 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;     });}