title: Javascript - Text to Appear With Delay (Ease-In)
body: <p>I'm trying to make it so that the text on the landing page appears with a slight delay....first, the first line should appear, then the second. They should both ease-in as they appear. Here's a screenshot of the section: </p>
  
  <p><a href="https://i.stack.imgur.com/kDGDd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kDGDd.png" alt="enter image description here"></a></p>
  
  <p>So "Welcome" should appear first, then "To the Bullshit Collection". I tried following the suggestions in this <a href="https://teamtreehouse.com/community/how-to-make-a-button-and-text-appear-after-a-delay" rel="nofollow noreferrer">treehouse article</a>. When following the method suggested by Lauren, "Welcome" never appears. </p>
  
  <p><a href="https://jsfiddle.net/fjvLwmrq/" rel="nofollow noreferrer">https://jsfiddle.net/fjvLwmrq/</a></p>
  
  <p>And when following the method suggested by Rob, <code>}//]]&gt;</code> appears (with no delay) instead of "Welcome".  </p>
  
  <p><a href="https://jsfiddle.net/a49rxo19/" rel="nofollow noreferrer">https://jsfiddle.net/a49rxo19/</a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg"&gt;
  &lt;div class="welcome-div"&gt;
      &lt;h3 class="welcome"&gt;Welcome&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="to-the-bullshit-collection-div"&gt;
      &lt;h3 class="to-the-bullshit-collection"&gt;To the Bullshit Collection&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;section id="section5" class="demo"&gt;
      &lt;a href="#section5"&gt;&lt;span&gt;&lt;/span&gt;Scroll&lt;/a&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.parallax-window {
  height: 100vh;
  }
  
  .welcome {
  text-align:center;
  font-family: Beautiful ES;
  font-size: 185px;
  font-weight: lighter;
  }
  
  .to-the-bullshit-collection {
  text-align:center;
  font-family: Beautiful ES;
  font-size: 185px;
  font-weight: lighter; 
  }
  
  #section5 {
  text-align:center;
  }
  
  #section5 a {
  padding-top: 70px;
  font-family: PT Sans Narrow;
  text-transform: Uppercase;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  }
  </code></pre>
  
  <p>And JavaScript:</p>
  
  <pre><code>//javascript functions
  (function ($, root, undefined) {
  $(function () { 
      'use strict';       
      // DOM ready, take it away      
      }); 
  })(jQuery, this);
  
  //landing page text delay
  function showWelcomeDiv() { 
      document.getElementById("welcome-div").style.display = "inline"; 
  }
  //this calls the function above, 3000 milliseconds is 3 seconds, adjust 
  here to make it a longer interval
  setTimeout("showBuyNow()", 1000);
  </code></pre>
  
  <p>Any idea what's going wrong? Thanks! </p>