Quelle est la façon de changer la couleur du texte lettre par lettre ?

Question

Je souhaite que chaque lettre du texte change de couleur une par une, l'une après l'autre. Par exemple: Bonjour le monde "H" deviendra rouge en premier, puis "E", puis "L", et ainsi de suite.

J'ai essayé d'envelopper chaque lettre dans un span et d'utiliser jquery et une boucle. Mais ça ne marche pas.

$("span").ready(function() {
  var lettres = $("span").length;
  pour (soit i = 0; i <= lettres; i++) {
    $("envergure")[i].css("couleur", "rouge");
  }
})</pré>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script>
<span>H</span>
<span>E</span>
<envergure>L</envergure>
<envergure>L</envergure>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<envergure>L</envergure>
<span>D</span>

Answer 1

Vous êtes sur la bonne voie, mais vous devez retarder les changementscolor的时间（比如说100ms），这样效果才能被看到。为了延迟，我们使用了接受2个参数的方法setTimeout :

1. Une fonction de rappel qui est appelée une fois le délai requis écoulé.
2. Délai requis (par exemple 100ms).

Lors de la sélection d'un temps de retard, tel que 100ms，我们应该将其乘以当前字母的索引（准确地说是当前的span, nous devons le multiplier par l'index de la lettre actuelle (le span actuel pour être précis) afin que l'effet puisse être vu.

Ceci est une démo en direct :

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

Dans jQuery, vous pouvez utiliser la fonction each pour parcourir tous les éléments d'un sélecteur

Pour "attendre" entre deux changements de couleur, vous pouvez embarquer les changements CSS dans une setTimeout fonction, liée à l'index de chaque boucle

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