逐个字母改变文本颜色的方法是什么？

Question

我想让文本中的每个字母逐个改变颜色，一个接一个地。例如： 你好世界 “H”将首先变为红色，然后是“E”，然后是“L”，依此类推。

我尝试将每个字母都包裹在一个span中，并使用jquery和循环。但是它不起作用。

$("span").ready(function() {
  var letters = $("span").length;
  for (let i = 0; i <= letters; 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>