Fade In Divs One After the Other on Page Load With jQuery

Question

I know that this question has been asked many times before:

Javascript: Fade In images on page load; one after the other?

Fade in divs one after another

jQuery .fadeIn() on page load?

But I've tried all of the suggested techniques and none of them worked. I'm trying to get three lines of text (the words are wrapped in divs), to appear one after the other when the page loads. Here is what I have:

HTML:

<div class="row"><!--second row-->
<div class="col-lg-12 center">
    <div id="tagline-wrapper">
        <div class="center-text hidden1">Responsive</div>
        <div class="between-lines">
            <div class="line"></div>
            <div class="clean hidden2">Clean</div>
            <div class="line"></div>
        </div>
        <div class="center-text hidden3">Powerful</div>
    </div>
</div>
</div><!--end row-->

CSS:

.center {
 text-align: center;
 display: flex;
 color: #ffffff;
 font-family: 'proxima_nova_ltsemibold';
 text-transform: uppercase;
 font-size: 52px;
}

#tagline-wrapper {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
}

.center-text {
text-align: center;
font-family: 'proxima_nova_ltsemibold';
font-size: 52px;
text-transform: uppercase;
color: #ffffff;
}

.between-lines {
display: flex;
align-items: center;
}

.line {
border-bottom: 2px solid #ffffff;
display: block;
flex-grow: 1;
height: 0;
}

.clean {
padding: 0 1.5rem;
text-align: center;
font-family: 'proxima_nova_ltsemibold';
font-size: 52px;
text-transform: uppercase;
color: #ffffff;
}

/*hide elements initially*/

.hidden1 {
display: none;
}

.hidden2 {
display: none;
}

.hidden3 {
display: none;
}

JavaScript

 $(document).ready(function(){
 var elements = [ 'hidden1, hidden2, hidden3' ];

  for (var i = 0; i < elements.length; i++) {
  setTimeout(function() {
      elements[i].style.opacity = 1;
      }, 1250 * i);
  }

  });

The above is the JS technique that was suggested in the first linked article.

JSFiddle attempt with the first technique here: https://jsfiddle.net/b184reyv/1/
JSFiddle attempt with the second technique here: https://jsfiddle.net/b184reyv/2/
JSFiddle attempt with the third technique here: https://jsfiddle.net/4w7kxLxf/

Thank you.

Answer 1

So there are a handful of issues here that I'll try to document for you:

1. for loops in JavaScript often scope a bit unexpectedly. You can read here for a great explanation of them. In your example, using i in a setTimeout would result in the last iteration of the loop being grabbed each time, as i is declared globally.

2. You're modifying the opacity of your hidden elements, but their original state is display: none;. An item with display: none; will never be shown, regardless of opacity. Instead of display: none;, use opacity: 0; You can also add a transition: opacity 1s to make them fade-in instead of just "appear".

3. Your array is not syntactically correct. Each item should be within quotes and split with a comma, whereas yours is currently one large string with commas in it.

var elements = ['hidden1', 'hidden2', 'hidden3'];

4. You're using .style on each item in the elements array, but they are simply strings. At no point to you convert these strings into elements, so trying to use .style will throw an error. You'll need to implement them into a selector.

Putting all of this information together, you may be looking for something like this instead. See the comments in the JavaScript for explanation.

var elements = ['hidden1', 'hidden2', 'hidden3'];

for (let i = 0; i < elements.length; i++) {
  var thisElement = $("." + elements[i]); //Get the current element based on class
  fadeInElement(thisElement, i);          //Call our "Fade in" function
}

function fadeInElement(elem, time) {      //Fade-in function that takes the element to fade-in, and the time it should wait
  setTimeout(function() {
    elem.css("opacity", "1");             //Set our element's opacity to 1
  }, 1250 * time);                        //Set the time it should wait
}

body {
  background-color: black;
}

.center {
  text-align: center;
  display: flex;
  color: #ffffff;
  font-family: 'proxima_nova_ltsemibold';
  text-transform: uppercase;
  font-size: 52px;
}

#tagline-wrapper {
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
}

.center-text {
  text-align: center;
  font-family: 'proxima_nova_ltsemibold';
  font-size: 52px;
  text-transform: uppercase;
  color: #ffffff;
}

.between-lines {
  display: flex;
  align-items: center;
}

.line {
  border-bottom: 2px solid #ffffff;
  display: block;
  flex-grow: 1;
  height: 0;
}

.clean {
  padding: 0 1.5rem;
  text-align: center;
  font-family: 'proxima_nova_ltsemibold';
  font-size: 52px;
  text-transform: uppercase;
  color: #ffffff;
}


/*hide elements initially*/

.hidden1, .hidden2, .hidden3 {
  opacity: 0;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <!--second row-->
  <div class="col-lg-12 center">
    <div id="tagline-wrapper">
      <div class="center-text hidden1">Responsive</div>
      <div class="between-lines">
        <div class="line"></div>
        <div class="clean hidden2">Clean</div>
        <div class="line"></div>
      </div>
      <div class="center-text hidden3">Powerful</div>
    </div>
  </div>
</div>
<!--end row-->

Answer 2

Oh so here my custom answer for what I understand of your problem :)

$(window).load(function() {
  var $word1 = $(".word1");
  var $word2 = $(".word2");
  var $word3 = $(".word3");

  $word1.fadeIn(1000, function() {
    $word2.fadeIn(1000, function() {
      $word3.fadeIn(1000);
    });
  });
});

.word {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="word word1">
  this
</div>

<div class="word word2">
  is
</div>

<div class="word word3">
  working
</div>