Javascript - 文本延迟显示(缓入)

Question

我正在尝试使登陆页面上的文本显示稍有延迟......首先，应该出现第一行，然后是第二行。当它们出现时，它们都应该缓入。这是该部分的屏幕截图:

所以“欢迎”应该首先出现，然后是“To the Bullshit Collection”。我尝试遵循此 treehouse article 中的建议。当遵循劳伦建议的方法时，“欢迎”永远不会出现。

https://jsfiddle.net/fjvLwmrq/

当遵循 Rob 建议的方法时，会出现(没有延迟)}//]]>，而不是“欢迎”。

https://jsfiddle.net/a49rxo19/

这是我的 HTML:

<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
<div class="welcome-div">
    <h3 class="welcome">Welcome</h3>
</div>

<div class="to-the-bullshit-collection-div">
    <h3 class="to-the-bullshit-collection">To the Bullshit Collection</h3>
</div>

<section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
</section>
</div>

CSS:

.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;
}

和 JavaScript:

//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);

知道出了什么问题吗？谢谢!

Answer 1

你不觉得这个方法更简单吗？

/*WindowOnload Fade-In*/

@keyframes chainReaction {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*div p {
  animation: chainReaction 2s;
  opacity: 0;
  animation-fill-mode: forwards;
}*/

.parallax-window .welcome-page-div {
  animation: chainReaction 3s;
  opacity: 0;
  animation-fill-mode: forwards;
  text-align: center;
  font-family: Beautiful ES;
  font-size: 30px;
  font-weight: lighter;
}

.parallax-window .welcome-page-div:nth-child(1) {
  animation-delay: .3s;
}

.parallax-window .welcome-page-div:nth-child(2) {
  animation-delay: 1s;
}


/*WindowOnload Fade-In*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
  <div class="welcome-page-div">
    <h3>Welcome</h3>
  </div>

  <div class="welcome-page-div">
    <h3>To the Bullshit Collection</h3>
  </div>

  <section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
  </section>
</div>