jQueryを使用した文字列によるプロパティのシフト

Question

私がやっていることは、テキストの段落を作成し、CSSプロパティを適用し、そのプロパティをたとえば500ms刻みで文字列全体にシフトさせることです。

$(document).ready(function(){ 
$("p").css("color","red"); 
}); 

のは、私は私の段落に200個の言葉を持っているとしましょう、私は文字列に199に0から漸増的にシフトし、CSSは一度に1ワードのみに適用されることを持っているだろうか？ 1つの単語を赤、次に次の単語などとする。

Answer 1

あなたは（あなたも、CSSを経由して、そこにいくつかのトランジションを追加することができます）クラスを追加することによって、このようにそれを行うことができます：

var p = $('.highlight-words') 
 
var words = p.text().split(' '); 
 
var toAppend = []; 
 
$.each(words, function(i, v) { 
 
    toAppend.push('<span>' + v + '</span>'); 
 
}); 
 
p.html(toAppend.join(' ')); 
 
var spans = p.find('span'); 
 
function delayClass(elem, delay) { 
 
\t setTimeout(function() { 
 
    \t elem.prev().removeClass('highlighted'); 
 
    \t elem.addClass('highlighted'); 
 
    }, delay); 
 
}; 
 
var delay = 0; 
 
spans.each(function(i, span) { 
 
\t delayClass($(span), delay); 
 
    delay += 500; 
 
});

.highlighted { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="highlight-words">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

またJSFiddleに。