Question 36411 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change the color of a text, one letter at a time? – Jquery

I want to make a text change the color of each letter individually, one at a time. For example:
Hello World
The "H" would be the first to become red, then "E", then "L", and so on.

I’ve tried making each letter a span and using jquery and a loop. But it doesn’t work.

$("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>
Tags:

4

Answers


  1. 0

    in jquery you have the function each that let you loop on all element of a selector

    to "wait" between two color change, you can embed the css change in a setTimeoutlink to the index of the each loop

    $(".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>
    Login or Signup to reply.
  2. 0

    You’re on the right track, but you will need to delay the change of the color for a certain moment (say 100ms) so that the effect can be seen. To have a delay, the method setTimeout is used that accepts 2 arguments:

    1. A callback function that is called when the wanted delay has passed.
    2. The wanted delay (100ms for example).

    When picking a delay, say 100ms, we should multiply it with the index of the current letter (current span to be precise) so that the effect can be seen.

    Here’s a live demo:

    /**
 * loop through the "span" elements.
 * delay a 100ms * i (current span index) that will later change the color for the span at index "i".
 * you may change the delay (100 in this case) by any value you want.
 */
$('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>

    jQuery .each method is used to loop through the selected span elements

    Login or Signup to reply.
  3. 0

    You have to use eq() function because you can’t use jquery function on a dom element, with eq you return a jquery element.

    $("span").ready(function(){
var letters = $("span").length;
for (let i = 0; i <= letters; i++){
  setTimeout(()=>{$("span").eq(i).css("color", "red")},i*1000);
 }
}
)
    <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>

    But the better solution is to use the each of jquery.

    $("span").each((index,el)=>{
    setTimeout(()=>{$(el).css("color", "red")},index*1000);
    })
    <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>
    Login or Signup to reply.
  4. 0 
    let string = document.querySelector(".str");

const coloredWriter = (str, appendTo, speed) => {
  const body = document.querySelector(`${appendTo}`);
  const stringText = str.innerText;
  str.remove();
  const splitedText = stringText.split("");

  splitedText.forEach((element) => {
    let span = document.createElement("span");
    span.style.fontSize = '30px'
    span.innerText = element;
    span.classList.add("color");

    body.append(span);

    const allSpans = document.querySelectorAll(".color");
    let i = 0;
    let timeOut = () => {
      let randomColor = Math.floor(Math.random() * 16777215).toString(16);
      if (allSpans[i]) {
        setTimeout(() => {
          allSpans[i].style.color = `#${randomColor}`;
          i++;
          timeOut();
        }, speed);
      }
    };
    timeOut();
  });
};

coloredWriter(string, "body", 500);
    .str{
  fontsize:35px
}
    <span class="str">hello world</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search