Apakah cara untuk menukar warna teks huruf demi huruf?

Question

Saya mahu setiap huruf dalam teks bertukar warna satu demi satu, satu demi satu. Sebagai contoh: Hai dunia "H" akan bertukar merah dahulu, kemudian "E", kemudian "L", dan seterusnya.

Saya cuba membungkus setiap huruf dalam jengkal dan menggunakan jquery dan gelung. Tetapi ia tidak berfungsi.

$("span").ready(function() {
  var huruf = $("span").panjang;
  untuk (biar i = 0; i <= huruf; i++) {
    $("span")[i].css("warna", "merah");
  }
})

Answer 1

Anda berada di landasan yang betul, tetapi anda perlu menangguhkan perubahancolor的时间（比如说100ms），这样效果才能被看到。为了延迟，我们使用了接受2个参数的方法setTimeout:

1. Fungsi panggil balik yang dipanggil selepas masa tunda yang diperlukan telah berlalu.
2. Masa kelewatan diperlukan (cth. 100ms).

Apabila memilih masa tunda, seperti 100ms，我们应该将其乘以当前字母的索引（准确地说是当前的span, kita harus mendarabkannya dengan indeks huruf semasa (span semasa adalah tepat) supaya kesannya dapat dilihat.

Ini ialah demo langsung:

/**
 * 循环遍历“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

Dalam jQuery, anda boleh menggunakan fungsi each untuk mengulangi semua elemen pemilih

Untuk "menunggu" antara dua perubahan warna, anda boleh membenamkan perubahan CSS ke dalam fungsi setTimeout, dipautkan ke indeks setiap gelung

$(".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>