Question

我有这样一句话：the world is so big

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

Answer 1

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 demo

有这个：

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

我们的想法是让jQuery将每个单词包装成跨度，这样你就不必手动完成：

  $(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);

});

在特定时间逐字突出显示一行

2 个答案:

jsBin demo