Highlight background (stackoverflow)

HTML

<span id="test">The word "fractal" often has different connotations for laypeople than mathematicians, where the layperson is more likely to be familiar with fractal art than a mathematical conception. The mathematical concept is difficult to formally define even for mathematicians, but key features can be understood with little mathematical background.</span>

<br><br>
<div id="time"></div>

CSS

span
{
    text-align:justify;
}

JavaScript

$(function(){
    var time = 30,
        text =  $("#test").text(),
        words = text.split(''),
        html = [];
    $.each(words, function(i,e) {
        html.push('<span>'+ e +'</span>');
    });
    $("#test").html(html.join(''));
    $("span", "#test").each(function(i,e) {
        $(e).delay(i*((30*1000)/$("span", "#test").length)).animate({'background-color': '#0f0'}, 500);
    });
    
    //just to show time passing
    var i = time;
    var timer = setInterval(function() {
        $("#time").html(i--);
        if (i===0) clearInterval(timer);
    }, 1000);
});