按特定时间突出显示跨度（使用Jquery）：

Question

我想用jquery突出特定时间的跨度。

例如:(在20秒内突出显示此行）

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

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

我想要这个结果：

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

Answer 1

修改

看看这个最新的JS小提琴，我已经更改了代码以确保它保留了span的位置并将其转换为插件 http://jsfiddle.net/joevallender/9UgEF/4/

原帖

以下是一些示例代码，可以帮助您入门，您可以在jsfiddle中看到它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);

});​

看起来相当多的代码很简单，但这是我能想到的最简单的方式来模仿你的演示。如果你打算使用它很多，它可以变成jQuery plugin relatively easily - 但你可能想稍微改变我的嵌套，也许给包装div＃wrapper- [span ID]或其他东西供以后使用。< / p>

Answer 2

timeouts不需要jQuery。像这样使用它：

window.setTimeout(function() {
    // specify somethingto do in this anonymous function,
    // which will be called after 20 seconds
}, 20*1000);

您是否可以选择在函数中使用jQuery。

---

要慢慢突出显示，您可以使用jQuery的动画队列。这还包括.delay()的超时，因此请使用

$myspan.delay(20*1000).animate({"background-color": "red"}, "slow");

注意，正如.animate() method的文档中所述，您需要使用Color插件或jQueryUI来为颜色设置动画。