Question

I want to highlight a span by specific time with jquery.

for example:(highlight this line in 20 sec)

<span> highlight me slowly by specific time</span>

window.setTimeout(function() {
    // what do i must write here?
}, 20*1000);

I want this Result:

http://8pic.ir/images/sk9q76r96e3dc1rq4zo.swf

Answer 1

EDIT

Have a look at this latest JS fiddle, I’ve changed the code to make sure it preserves the location of the span and also turned it into a plugin
http://jsfiddle.net/joevallender/9UgEF/4/

Original post

Here is some sample code to get you started, you can see it in a jsfiddle here http://jsfiddle.net/joevallender/9UgEF/2/

HTML

<span id="test">Do you see any Teletubbies in here?</span>​

JS

$(document).ready(function(){

  var seconds = 5;
  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);

});​

It looks liks quite a lot of code something simple, but it was the easiest way I could think to more closely mimic your demo. If you were going to use this a lot it could be turned into a jQuery plugin relatively easily – but you might want to alter my nesting slightly, perhaps giving the wrapper div #wrapper-[span ID] or something for later use.