jquery - 特定の時間で単語ごとに行を強調表示します

Question

私はこのような行を持っています：the world is so big

jQueryを使用してタイマーでこの行を単語ごとに強調表示する方法を知りたい（たとえば、強調表示は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に各単語をスパンにラップさせて、手動で行う必要がないようにすることでした。

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