how to iterate over an h1 element and make each word fade in with jquery?

Question

I would like to know how to iterate over the h1 element, and get each word to fade in one after the other.

I got it done, but the code is not dry. Can someone please show and explain how to do this with a loop?

$('document').ready(function() {
  $('#H').fadeIn(3000).removeClass("hidden").addClass("hColor1");
  $('#e').fadeIn(5000).removeClass("hidden").addClass("hColor2");
  $('#l').fadeIn(6000).removeClass("hidden").addClass("hColor3");
  $('#secondL').fadeIn(7000).removeClass("hidden").addClass("hColor4");
  $('#o').fadeIn(7300).removeClass("hidden").addClass("hColor5");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <h1 class="hidden"><span id="H">Hello</span> <span id="e">everyone</span> <span id="l">lets</span> <span id="secondL">learn</span> <span id="o">javascript</span></h1>
</div>

You can do this with pure css animation though. – Arber Sylejmani Feb 10 '18 at 09:08 — Arber Sylejmani, Feb 10 '18 at 09:08

score 2 · Answer 1 · edited Feb 13 '18 at 07:07

I wouldn't hide the < h1 > but the spans inside, then use setTimeout() to delay each fadeIn()

$('document').ready(function(){
    var spans = $("h1").find("span"); // Get all spans inside <h1>
    spans.hide(); // hide spans
    var show_time = 1000; // set time for first span
    $.each(spans, function(i, item){ // item = every span
        setTimeout(function(){ // setTimeout delays events
            $(item).fadeIn('slow') // fadeIn to show each item (span)
        }, show_time); // showtime after function inside setTimeout
        show_time = show_time + 1000; // increase 1 sec for every span
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <h1 class="">
        <span id="H">Hello</span>
        <span id="e">everyone</span>
        <span id="l">lets</span>
        <span id="secondL">learn</span>
        <span id="o">javascript</span>
    </h1>
</div>

Thank you very much for your time. ill give it a go. – Feb 11 '18 at 05:43 — , Feb 11 '18 at 05:43

John S · Answer 2 · 2018-02-11T22:04:13.630

The code below does the following:

Gets the words from the h1 element and splits them by whitespace into an array.
Using the array of words, it creates an html string with span elements surrounding each word.
Inserts the html back into the h1 element.
Hides all the span elements.
Shows the h1 element (but nothing will show at this point because all the span children are hidden).
Fades in the span elements one after another.

The last step is accomplished by passing a function as the second parameter to the .fadeIn() function. That function is called after the element is finished fading in.

The fading is done in a function named fadeInNext(). That function is called initially for the first child element, but it calls itself for the next element when the fading is finished. That will continue until all child elements have been faded in.

$(function() {
  var $header = $('#hdr');
  
  $header.html($.map($header.text().split(/\s+/), function(word) {
    return '<span>' + word + '</span>';
  }).join(' ')).children().hide().end().show();

  (function fadeInNext($element) {
    $element.fadeIn('slow', function() {
     fadeInNext($element.next());
    });
  })($header.children(':first'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="hdr" style="display: none;">Hello everyone lets learn javascript</h1>

jsfiddle showing the code in re-usable functions.

jsfiddle fading in letters, instead of words.

score 0 · Answer 3 · answered Feb 10 '18 at 05:19

you can do by .each()

$('document').ready(function() {

  $('.hidden *').each(function(index) {
    $(this).fadeIn((index + 1) * 1000).addClass('hColor' + (index + 1));
  });

})

.hColor1 {
  background: pink;
}

.hColor2 {
  background: lightblue;
}

.hColor3 {
  background: lightgreen;
}

.hColor4 {
  background: lightgrey;
}

.hColor5 {
  background: lightyellow;
}

h1.hidden * {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="hidden">
    <span id="H">
      Hello
    </span>
    <span id="e">
      everyone
    </span>
    <span id="l">
      lets
    </span>
    <span id="secondL">
      learn
    </span>
    <span id="o">
      javascript
    </span>
  </h1>
</div>

Hastig Zusammenstellen · Accepted Answer · 2018-02-10T23:12:55.083

// get your text string
var hello = $('.hello').text();
// empty text container so we can refill it later
$('.hello').empty();
// split string by each word and save to array
var helloArray = hello.split(' ');
// adjust these values to customize how slow/fast your words appear
var delays = [400, 500, 1500, 1600, 1900];
// for each word in the array..
$(helloArray).each(function(i) {
  // cant use this inside the setTimeout function so we save this as a variable
  var pseudoThis = this;
  // begin the setTimeout function to stagger/delay the word appearance
  setTimeout(function() {
    // the html to wrap each word with for customizing css
    wordAndWrapper = '<span class="hColor n'+i+'">'+pseudoThis+'</span> ';
    // append html with variables inserted to text container
    $('.hello').append(wordAndWrapper);
  // i is used here to get the position in the delays array
  }, delays[i]);
  // if its the last word (or any word you want to emphasize as we've done with 'javascript' here)
  if (i === 4) {
    setTimeout(function() {
      // custom css styling for last word using a class
      $('.n4').addClass('grow');
    // had to make the delay 50ms more than delay of appearance so that transition in css applies
    }, 1950);
  };
})

html, body {
  margin: 0;
  background-color: hsla(0, 0%, 90%, 1);
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.hello {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}
.hColor { 
  display: flex;
  justify-content: center;
  width: 25%;
  padding: 0 30px;
  box-sizing: border-box;
  transition: all 0.2s linear;
}
.hColor.n0 { color: hsl(0, 51.2%, 49.8%); }
.hColor.n1 { color: hsl(190.7, 93.7%, 43.5%); }
.hColor.n2 { color: hsl(36, 70.9%, 51.6%); }
.hColor.n3 { color: hsl(286, 71.8%, 44.5%); }
.hColor.n4 { width: 100%; font-variant: small-caps; color: hsl(107.9, 83.6%, 45.5%); }
.hColor.n4.grow { font-size: 11vw; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="hello">Hello Everyone Let's Learn javascript</h1>
</div>

fiddle

https://jsfiddle.net/Hastig/vorj57gs/

credit

how to iterate over an h1 element and make each word fade in with jquery?

4 Answers4