javascript - 延迟后如何淡入元素

Question

见下面的代码。我有一个带有渐变叠加层和一些文本的主图。我有它，所以当网站打开时，这一切都会消失。我希望图像/渐变首先淡入，一旦完全淡入，然后文本淡入或滑入。实现此目的的最佳方法是什么？对褪色文本的简单延迟？谢谢。

HTML

   <section id="hero">
            <div id="hero-gradient">
            <div class="container">
                <h1 id="hero-title">ASCO AUSTRALIA</h1>
                <p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p>
                <div id="button-container">
                    <a href="#learn-more-anchor"><div id="learn-more-button" class="smoothScroll">LEARN MORE</div></a>
                    <a href="#learn-more-anchor"><div id="find-us-button" class="smoothScroll">FIND US</div></a>
                </div>
                <a class="smoothScroll"><img src="images/arrow.png" id="arrow" class="animated bounce"></a>
            </div>
            </div>
    </section>

CSS

    #hero {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 890px;
        background-image: url(../images/hero.jpg);
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
      animation: fadein 2s;
      z-index: 0;
    }

    #hero-gradient {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 890px;
      background: linear-gradient(-45deg, #324f8f, #1a7ba7);
      opacity: 0.90;
      z-index: 1;
    }

    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    #hero .container {
      padding-top: 300px;
    }

    #hero-body {
      max-width: 1100px;
      margin: 0 auto;
      color: #fff;
      text-align: center;
      font-weight: 200;
    }

    #button-container {
      width: 1440px;
      margin: 70px auto;
      text-align: center;
      max-width: 90%;
    }

    #learn-more-button {
      margin-right: 15px;
      padding-top: 25px;
      width: 200px;
      height: 45px;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #fff;
      font-weight: 800;
      text-align: center; 
      letter-spacing: 1px;
      transition: 0.45s;
      border: 1px solid #fff;
      border-radius: 50px;
      -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
      -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
      box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
      display: inline-block;
    }

    #learn-more-button:hover {
      cursor: pointer;
      width: 218px;
    }

    #find-us-button {
      margin-left: 15px;
      padding-top: 25px;
      width: 200px;
      height: 45px;
      background-color: #009ee3;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #fff;
      font-weight: 800;
      text-align: center; 
      letter-spacing: 1px;
      transition: 0.45s;
      border-radius: 50px;
      -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
      -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
      box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
      display: inline-block;
    }

    #find-us-button:hover {
      cursor: pointer;
      width: 218px;
    }

Javascript

$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-title").css("opacity", 1 - $(window).scrollTop() / 380);
    });
});

$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-body").css("opacity", 1 - $(window).scrollTop() / 410);
    });
});

$(document).ready(function(){
    $(window).scroll(function(){
        $("#learn-more-button").css("opacity", 1 - $(window).scrollTop() / 450);
    });
});

$(document).ready(function(){
    $(window).scroll(function(){
        $("#find-us-button").css("opacity", 1 - $(window).scrollTop() / 450);
    });
});

Answer 1

正如我在评论中所说，您不必使用多个 $(document).ready()，一个就足够了。在这种情况下，同样适用于 $(window).scroll。关于这个问题，我认为一个解决方案是使用 display: none; 并使用 setTimeout() 方法隐藏 .container 元素您只需在 x 秒后使用 fadeIn() 显示它。

可以看看这个 JSFIDDLE 或者只运行下面的代码片段以查看它的实际效果。

$(document).ready(function() {
  $(window).scroll(function() {
    $("#hero-title").css("opacity", 1 - $(window).scrollTop() / 380);
    $("#hero-body").css("opacity", 1 - $(window).scrollTop() / 410);
    $("#learn-more-button").css("opacity", 1 - $(window).scrollTop() / 450);
    $("#find-us-button").css("opacity", 1 - $(window).scrollTop() / 450);
  });
  setTimeout(function() {
    $('.container').fadeIn();
  }, 2000);
});

#hero {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 890px;
  background-image: url(../images/hero.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  animation: fadein 2s;
  z-index: 0;
}
#hero-gradient {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 890px;
  background: linear-gradient(-45deg, #324f8f, #1a7ba7);
  opacity: 0.90;
  z-index: 1;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#hero .container {
  padding-top: 300px;
  display: none;
}
#hero-body {
  max-width: 1100px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-weight: 200;
}
#button-container {
  width: 1440px;
  margin: 70px auto;
  text-align: center;
  max-width: 90%;
}
#learn-more-button {
  margin-right: 15px;
  padding-top: 25px;
  width: 200px;
  height: 45px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  transition: 0.45s;
  border: 1px solid #fff;
  border-radius: 50px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
  display: inline-block;
}
#learn-more-button:hover {
  cursor: pointer;
  width: 218px;
}
#find-us-button {
  margin-left: 15px;
  padding-top: 25px;
  width: 200px;
  height: 45px;
  background-color: #009ee3;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  transition: 0.45s;
  border-radius: 50px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
  display: inline-block;
}
#find-us-button:hover {
  cursor: pointer;
  width: 218px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="hero">
  <div id="hero-gradient">
    <div class="container">
      <h1 id="hero-title">ASCO AUSTRALIA</h1>
      <p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p>
      <div id="button-container">
        <a href="#learn-more-anchor">
          <div id="learn-more-button" class="smoothScroll">LEARN MORE</div>
        </a>
        <a href="#learn-more-anchor">
          <div id="find-us-button" class="smoothScroll">FIND US</div>
        </a>
      </div>
      <a class="smoothScroll">
        <img src="images/arrow.png" id="arrow" class="animated bounce">
      </a>
    </div>
  </div>
</section>