Javascript 延迟后如何淡入元素

请参阅下面的代码。我有一个英雄形象与梯度覆盖和一些文字。我有它，所以当网站打开时，这一切都会消失。我只希望图像/渐变先淡入，一旦完全淡入，然后文本淡入或滑入。实现这一目标的最佳方式是什么？在褪色的文本上简单的延迟？谢谢

HTML

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

---

正如我在评论中所说，您不必使用多个

$（document）.ready（）

，一个就足够了。同样的情况也适用于

$（窗口）。在这种情况下，滚动
。关于这个问题，我认为解决方案是使用
display:none隐藏
.container
元素setTimeout（）
方法，您只需在
x
秒后使用
fadeIn（）
显示它

您可以查看这个，也可以运行下面的代码片段来查看它的实际操作


$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
$（“#英雄标题”）.css（“不透明度”，1-$（窗口）.scrollTop（）/380）；
$（“#英雄身体”）.css（“不透明度”，1-$（窗口）.scrollTop（）/410）；
$（“#了解更多按钮”）.css（“不透明度”，1-$（窗口）.scrollTop（）/450）；
$（“#查找我们按钮”）.css（“不透明度”，1-$（窗口）.scrollTop（）/450）；
});
setTimeout（函数（）{
$（'.container'）.fadeIn（）；
}, 2000);
});
英雄{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：890px；
背景图像：url（../images/hero.jpg）；
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
动画：Fadein2S；
z指数：0；
}
#英雄梯度{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：890px；
背景：线性梯度（-45度，#324f8f，#1a7ba7）；
不透明度：0.90；
z指数：1；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
#英雄，容器{
填充顶部：300px；
显示：无；
}
#英雄身体{
最大宽度：1100px；
保证金：0自动；
颜色：#fff；
文本对齐：居中；
字号：200；
}
#按钮容器{
宽度：1440px；
利润率：70像素自动；
文本对齐：居中；
最大宽度：90%；
}
#了解更多信息按钮{
右边距：15px；
填充顶部：25px；
宽度：200px；
高度：45px；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：14px；
颜色：#fff；
字号：800；
文本对齐：居中；
字母间距：1px；
过渡：0.45s；
边框：1px实心#fff；
边界半径：50px；
-webkit盒阴影：0px 0px 25px 0px rgba（0,0,0,0.07）；
-moz盒阴影：0px 0px 25px 0px rgba（0,0,0,0.07）；
盒影：0px 0px 25px 0px rgba（0,0,0,0.07）；
显示：内联块；
}
#了解更多按钮：悬停{
光标：指针；
宽度：218px；
}
#找到我们按钮{
左边距：15px；
填充顶部：25px；
宽度：200px；
高度：45px；
背景色：#009ee3；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：14px；
颜色：#fff；
字号：800；
文本对齐：居中；
字母间距：1px；
过渡：0.45s；
边界半径：50px；
-webkit盒阴影：0px 0px 25px 0px rgba（0,0,0,0.07）；
-moz盒阴影：0px 0px 25px 0px rgba（0,0,0,0.07）；
盒影：0px 0px 25px 0px rgba（0,0,0,0.07）；
显示：内联块；
}
#找到我们按钮：悬停{
光标：指针；
宽度：218px；
}

澳大利亚ASCO
ASCO Australia为澳大利亚的能源、资源和基础设施行业提供陆上供应基地、运输和物流以及海上供应基地服务
为什么要使用多个
$（文档）。准备好了吗？一个就足够了。你能按照你希望元素淡入的顺序给出元素的ID吗？谢谢@elementzero23，但现在已经正确回答了。谢谢！工作完美。关于javascript，我对所有这些都是新手，到目前为止只学习了HTML和CSS。任何我需要的Javascript我都可以在网上找到。我下一步将学习它。@ColinStewart，同样的东西也适用于
$（窗口）。也滚动
。在这种情况下，您只需要一次，就可以将所有函数放在一个函数中。
    #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;
    }

$(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);
    });
});