title: Fade In Divs One After the Other on Page Load With jQuery
body: <p>I know that this question has been asked many times before:</p>
  
  <p><a href="https://stackoverflow.com/questions/33750053/javascript-fade-in-images-on-page-load-one-after-the-other">Javascript: Fade In images on page load; one after the other?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/3768607/fade-in-divs-one-after-another">Fade in divs one after another</a></p>
  
  <p><a href="https://stackoverflow.com/questions/21360519/jquery-fadein-on-page-load">jQuery .fadeIn() on page load?</a></p>
  
  <p>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:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;&lt;!--second row--&gt;
  &lt;div class="col-lg-12 center"&gt;
      &lt;div id="tagline-wrapper"&gt;
          &lt;div class="center-text hidden1"&gt;Responsive&lt;/div&gt;
          &lt;div class="between-lines"&gt;
              &lt;div class="line"&gt;&lt;/div&gt;
              &lt;div class="clean hidden2"&gt;Clean&lt;/div&gt;
              &lt;div class="line"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="center-text hidden3"&gt;Powerful&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!--end row--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code> $(document).ready(function(){
   var elements = [ 'hidden1, hidden2, hidden3' ];
  
    for (var i = 0; i &lt; elements.length; i++) {
    setTimeout(function() {
        elements[i].style.opacity = 1;
        }, 1250 * i);
    }
  
    });
  </code></pre>
  
  <p>The above is the JS technique that was suggested in the first linked article. </p>
  
  <p>JSFiddle attempt with the first technique here: <a href="https://jsfiddle.net/b184reyv/1/" rel="nofollow noreferrer">https://jsfiddle.net/b184reyv/1/</a><br>
  JSFiddle attempt with the second technique here: <a href="https://jsfiddle.net/b184reyv/2/" rel="nofollow noreferrer">https://jsfiddle.net/b184reyv/2/</a><br>
  JSFiddle attempt with the third technique here: <a href="https://jsfiddle.net/4w7kxLxf/" rel="nofollow noreferrer">https://jsfiddle.net/4w7kxLxf/</a>    </p>
  
  <p>Thank you.  </p>