Wie kann ich die Textfarbe Buchstabe für Buchstabe ändern?

Question

Ich möchte, dass jeder Buchstabe im Text nacheinander seine Farbe ändert. Zum Beispiel: Hallo Welt „H“ wird zuerst rot, dann „E“, dann „L“ und so weiter.

Ich habe versucht, jeden Buchstaben in einen Span zu packen und JQuery und eine Schleife zu verwenden. Aber es funktioniert nicht.

$("span").ready(function() {
  var Buchstaben = $("span").length;
  for (sei i = 0; i <= Buchstaben; i++) {
    $("span")[i].css("color", "red");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

Answer 1

你走在正确的轨道上，但是你需要延迟改变color的时间（比如说100ms），这样效果才能被看到。为了延迟，我们使用了接受2个参数的方法setTimeout：

1. 一个回调函数，在所需延迟时间过后被调用。
2. 所需的延迟时间（比如100ms）。

当选择一个延迟时间，比如100ms，我们应该将其乘以当前字母的索引（准确地说是当前的span），这样效果才能被看到。

这是一个实时演示：

/**
 * 循环遍历“span”元素。
 * 延迟100ms * i（当前span索引），以便稍后改变索引为“i”的span的颜色。
 * 你可以根据需要更改延迟时间（在这个例子中是100）。
 */
$('span').each((i, el) => setTimeout(() => $(el).css('color', 'red'), i * 100))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

Answer 2

在jQuery中，你可以使用each函数来循环遍历选择器的所有元素

为了在两次颜色变化之间“等待”，你可以将CSS变化嵌入到setTimeout函数中，链接到each循环的索引

$(".letters span").each(function(index, elem) {
  setTimeout(function() {
    $(elem).css('color', 'red');
  }, index * 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="letters">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>, </span>
  <span>W</span>
  <span>O</span>
  <span>R</span>
  <span>L</span>
  <span>D</span>
</div>