Question

I’ve been rattling my head today to try and get a mouseover text colour changing script, that animates from changing the first letter of the string then each letter after that.

So effectively it creates almost a colour slide in change? I hope you understand what i mean.

I got really confused and ended up getting the text i wanted animated into a string, converting the string to an array then using a loop with set timeout to change each element in the array to the new color.

but my logic is all over the place im sure and things just are not working!!

could somebody please give this a look over or provide me with a solution! thanks

http://jsfiddle.net/OwenMelbz/qTbzq/

Answer 1

How about something like this: jsFiddle example.

jQuery:

var string = $('h2').text();
var letters = string.split('');
var x = string.length;
$('h2').text('');
$.each(letters, function(index) {
    $('h2').append('<span id="e' + index + '" class="normal">' + letters[index] + '</span>');

});
function Animate(elem) {
    setTimeout(function() {
        $('#e'+elem).animate({
            'color': 'yellow'
        }, 500, function(){elem++;Animate(elem)});
    }, 50);
}
$('h2').mouseenter(function() {
    Animate('0');
}).mouseleave(function() {});

HTML:

<h2>OWEN MELBOURNE</h2>