title: How change background-color with jquery animation, like a transition
body: <p>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:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="background"&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>    .background {
          width: 500px;
          height: 500px;
          margin: 0 auto;
          background-color: #000;
      }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>    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();
              }
          });
      };
  </code></pre>
  
  <p>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???</p>
  
  <p>I tried to find a code ready to use, but just find CSS3, and I want to give support for IE8.</p>
  
  <p>Anyone knows a good way to do what i am trying to do?</p>
  
  <p>Thanks!</p>