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

我想用jquery按特定时间突出显示跨度。按特定时间突出显示跨度（使用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

来源

2012-08-25 KF2

准确地说，我想要突出显示一段时间（如20秒）的span标记 – KF2

我的意思是说w/jquery。除了生产原型之外，你还做了什么来解决这个问题？ –

我是新的j查询，我只是想知道我怎么能做这样的事情与j查询？ – KF2

编辑

看一看这个最新的JS小提琴，我已经改变了代码，以确保它保留跨度的位置，并把它变成一个插件 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>

$(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]或什么东西供以后使用。

来源

2012-08-25 14:08:09 joevallender

酷，看看我最近jsfiddle编辑 – joevallender

另一个问题：我做了什么（http://jsfiddle.net/9UgEF/7/）（多行？）它突出显示所有行在一起？ – KF2

，这使得它更加复杂;）我们要么必须将其分成几行，要么考虑一次突出显示一个字符。它需要成为一个流畅的动画吗？ - 也出于兴趣，这是为了什么？ – joevallender

没有jQuery的需要timeouts。像这样使用它：

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注意，你需要一个彩色插件或jQueryUI的动画色彩。

来源

2012-08-25 13:46:21 Bergi

我知道，但我如何突出显示我的span标签（从头到尾）？ – KF2

使用http://api.jquery.com/animate/ – Stefan

你能举个例子吗？ – KF2

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

回答

相关问题