文字の色を一文字ずつ変える方法は何でしょうか？

Question

<p>テキスト内の各文字の色を 1 つずつ変更したいと思います。例えば： こんにちは世界 最初に「H」が赤に変わり、次に「E」、次に「L」というようになります。 </p> <p>各文字をspanで囲み、jqueryとループを使用してみました。しかし、うまくいきません。 </p> <p> <pre class="brush:js;toolbar:false;">$("span").ready(function() { var 文字 = $("スパン").length; for (let i = 0; i <= 文字; i ) { $("スパン")[i].css("色", "赤"); } })</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</スクリプト> H <span>E</span> L L O <span>、</span> W O <span>R</span> L D </p>

Answer 1

正しい方向に進んでいますが、効果を確認できるように color の変更を遅らせる必要があります (たとえば 100ms)。遅延させるには、2 引数を受け入れるメソッド setTimeout を使用します。

必要な遅延時間が経過した後に呼び出されるコールバック関数。
必要な遅延時間 (
2. 100ms など)。

100ms

などの遅延時間を選択するときは、その効果に現在の文字のインデックス (正確には現在の span) を乗算する必要があります。見た。 これはライブデモです:

リーリー リーリー

Answer 2

jQuery では、each 関数を使用してセレクターのすべての要素をループできます

2 つの色の変更を「待機」するには、各ループのインデックスにリンクされた setTimeout 関数に CSS の変更を埋め込むことができます

リーリー リーリー