突出显示多行顺序（使用 jquery）

Question

我使用此代码在特定时间突出显示我的 span 标签

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>

JavaScript：

$(document).ready(function(){

  var seconds = 7;
  var el = $('span#test');
  var width = el.outerWidth();
  var height = el.outerHeight();
  var wrapper = $('<div>').css({
    width: width + 'px',
    height: height + 'px',
    position: 'relative'
  });
  var background = $('<div>').css({
    width: 0,
    height: height + 'px',
    position: 'absolute',
    background: '#0f0'
  });
  wrapper.append(background);
  wrapper.append(el.css('position','absolute'));
  $('body').append(wrapper);
  background.animate({width: '+=' + width},1000*seconds);

});​​

演示： http://jsfiddle.net/9UgEF/8/

一切都很好，但我想突出显示span tagsequential（它突出显示所有行，我想突出显示连续的行（当第一行突出显示完成后转到下一行......））。 我该怎么做？

Answer 1

$(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);
    });
});​

FIDDLE