Animating a jQuery script to color text

Question

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.

I have added the code enclosed in ** for the animation, but it isn't working. I have also included the jQuery color animation plugin, 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.

Thanks,

Nick

$(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 < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>";
    }

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

setInterval function

setInterval(function(){

$(".colour").each(function colourChange() {
      var text = $(this).text().split('');
      var normal = generateColors(text);
      $(this).html(normal);
  });
}, 3000);
});

score 1 · Answer 1 · answered May 04 '12 at 14:03

1

Maybe you could use setTimeout() as shown bellow:

setTimeout(generateColors($('.color').text()), 10000);

answered May 04 '12 at 14:03

sp00m

47,968
31
142
252

I presume that this would only delay the setting of colours once by 10 secs, rather than being recurring. Also this would not animate a colour transition – Nick May 04 '12 at 14:37
As [here](http://stackoverflow.com/questions/3138756/jquery-repeat-function-every-60-seconds/3138784#3138784). – sp00m May 04 '12 at 14:57
Thanks, I have the setInterval function working, and have added it at the end of my question above. Problem is it doesn't run the function on page load and there is no animation in the transition – Nick May 04 '12 at 19:52

score 0 · Answer 2 · answered May 04 '12 at 21:28

OK, I figured this out in the end. Thanks to sp00m for getting me on the right track with setTimeout. I added the following setInterval function which animates changing the colours of the spans in the .colour divs (using color animation plugin) using the getColor function I was already using:

setInterval(function(){
    $(".colour span").each(function () {
        var colourChange=getColor();
        $(this).animate ({
        color: colourChange,
        },2000);     
    });

}, 4000);

});

works a treat!

Animating a jQuery script to color text

2 Answers2