逐個字母改變文字顏色的方法是什麼？

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.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>