jquery - 以特定时间逐字突出显示一行

Question

我有这样的一行：the world is so big

我想知道如何通过带有 jQ​​uery 的计时器逐字突出显示这一行（例如突出显示必须在 20 秒内完成）。我搜索了很多谷歌和论坛，但我找不到一个好方法。

Answer 1

一个解决方案：http: //jsfiddle.net/fCWXL/

HTML：

<span id=sentence><span class=tok>The</span> <span class=tok>word</span> <span class=tok>is</span> <span class=tok>too</span> <span class=tok>big</span></span>​

javascript：

var tokens = $('#sentence').find('.tok');
var n = tokens.length;
var index = 0;
setInterval(function(){
    tokens.css('background-color', 'white');
    $('#sentence').find('.tok:eq('+(index%n)+')').css('background-color', 'red');
    index++;
}, 20000/n);

这个想法很简单，每 20000/n 毫秒，改变下一个令牌的背景。​ 当然，您必须调整它以获得确切的预期效果。

Answer 2

jsBin 演示

有这个：

<p class="word">the world is so big</p>

这个想法是让 jQuery 将每个单词包装成 span，这样您就不必手动进行：

  $(this).contents().wrap('<span></span>');
  $(this).html( $(this).html().replace(/ /ig,'</span> <span>') );

并创建一个 setInterval 来突出显示（添加一个类）段落中的每个单词。这是整个代码：

$('p.word').each(function(){
  
  $(this).contents().wrap('<span></span>');
  $(this).html( $(this).html().replace(/ /ig,'</span> <span>') );
  
  var span = $(this).find('span');
  var countSpans = span.length;
  var i = 0;
  var inter;
  
  function highlighting(){
    if(i<countSpans){
      span.removeClass('highlight').eq(i++).addClass('highlight'); 
    }else{
      clearInterval(inter);
      span.removeClass('highlight');
    }
  }
  inter = setInterval(highlighting, 8000/countSpans);
  
});