title: Animating a jQuery script to color text
body: <p>I am using the script below to randomly colour text letters in a particular class. I would like to extend this so that the colouring is animated every 10 seconds. The idea then is that the animation would use the same generateColors function that is used to colour the text on page load, animating from one set of colours to another.  </p>
  
  <p>I have added the code enclosed in ** for the animation, but it isn't working. I have also included the <a href="http://www.bitstorm.org/jquery/color-animation/" rel="nofollow">jQuery color animation plugin</a>, but I realise that with the code I am trying to use below I am not actually animating color, but rather trying to animate HTML, which probably isn't possible. I am not sure how to animate the colours using the color plugin, however, and would be glad of any help.</p>
  
  <p>Thanks,</p>
  
  <p>Nick</p>
  
  <pre><code>$(document).ready(function() {
  
          $('.colour').each(function() {
          var text = $(this).text().split(''),
          normal = generateColors(text),
          **animate = generateColors(text);**
  
       $(this).html(normal);
  
       **$(this).animate( 
        function(event) { $(this).html(animate) });**
  
       });
  });
  
  function generateColors(characters) {
      var result = "";
      var i = 0;
      for(i=0; i &lt; characters.length; i++) {
          result += "&lt;span style='color:"+getColor()+"'&gt;"+characters[i]+"&lt;/span&gt;";
      }
  
     return result;
  }        
  
  function getColor() {
      var colList = ['#942525', '#9E2921','#A4392A', '#8C381E', '#8E4224', '#7C3E21','#B64B26', '#B75D29', '#7F5B24','#665824','#89782E', '#49411F', '#4E512A', '#5E7D37', '#567D38', '#278C8C', '#387872','#1D6362','#257377', '#257377', '#8D3594'];
  
      var i = Math.floor((Math.random()*colList.length));
    return colList[i];
  }
  </code></pre>
  
  <p><strong>setInterval function</strong></p>
  
  <pre><code>setInterval(function(){
  
  $(".colour").each(function colourChange() {
        var text = $(this).text().split('');
        var normal = generateColors(text);
        $(this).html(normal);
    });
  }, 3000);
  });
  </code></pre>