Quelle est la façon de changer la couleur du texte lettre par lettre ?
P粉613735289
P粉613735289 2023-08-31 13:03:36
0
2
606

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"); } }) 
 H E L L O ,  W O R L D

P粉613735289
P粉613735289

répondre à tous (2)
P粉521013123

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

Lors de la sélection d'un temps de retard, tel que100ms,我们应该将其乘以当前字母的索引(准确地说是当前的span, nous devons le multiplier par l'index de la lettre actuelle (lespanactuel 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))
 H E L L O ,  W O R L D
    P粉865900994

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

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

    $(".letters span").each(function(index, elem) { setTimeout(function() { $(elem).css('color', 'red'); }, index * 500); });
     
    H E L L O , W O R L D
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!