highlight multi line sequential (with jquery)

Question

I use this code to highlight my span tag by a specific time

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);

});

Demo: http://jsfiddle.net/9UgEF/8/

every thing is OK,but i want to highlight span tagsequential(it's highlight all line together,i want to highlight lines sequential(when first line highlight finished go to next line and ...)) . How can i do it?

http://stackoverflow.com/questions/4147080/can-i-wrap-each-line-of-multi-line-text-in-a-span — Ofir Baruch, Aug 25 '12 at 15:58

adeneo · Accepted Answer · 2012-08-25T17:14:15.640

3

$(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

edited Aug 25 '12 at 17:14

answered Aug 25 '12 at 16:01

adeneo

312,895
29
395
388

You're welcome! Note that the color animation is using jQuery UI, there is a much smaller plugin for just animating colors if you're not using the UI library for other stuff, and you could probably even do it without the animation, it just would'nt be that smooth. – adeneo Aug 25 '12 at 16:52
how is it controlled to take an exact amount of time?(for example i want to highlight all lines in 30 sec) – KF2 Aug 25 '12 at 16:56
1

@irsog - updated the answer to include a `time` variable for that purpose, see the updated fiddle in the answer ? – adeneo Aug 25 '12 at 17:14
-@adeneo sorry i'm new i jquery,another question:how can i do it for this : http://jsfiddle.net/9UgEF/37/ – KF2 Aug 25 '12 at 18:09

highlight multi line sequential (with jquery)

1 Answers1