jquery - 按特定时间突出显示跨度（使用 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 fiddle，我已经更改了代码以确保它保留了 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 插件——但你可能想稍微改变我的嵌套，也许给 wrapper div #wrapper-[span ID] 或其他东西以供以后使用。

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()方法文档中所述，您将需要一个 Color 插件或 jQueryUI 来为颜色设置动画。