cascade text change

by OwenMelbz

HTML

<h2>OWEN MELBOURNE</h2>

CSS

#debug{
margin-top:200px;    
}
.normal {}
.yellow {}

JavaScript

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

});

function Animate(elem) {
    setTimeout(function() {
        $('#e' + elem).animate({
            'color': 'yellow'
        }, 50, function() {
            elem++;
            Animate(elem)
        });
    }, 10);
$('#e'+elem).removeClass('normal').addClass('yellow');
}
$('h2').mouseenter(function() {
    Animate('0');
}).mouseleave(function() {
$('*').stop();
    $('h2 span').removeClass('yellow').addClass('normal').animate({'color': 'black'});    
});