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 tag连续（它突出显示所有线条，我想突出显示连续的线条（当第一线高亮显示完成后转到下一行并且...））。我该怎么办？

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

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

1 个答案: