打开窗口时标题淡入淡出答案

【问题标题】：Titles fadein on window open打开窗口时标题淡入淡出
【发布时间】：2019-05-02 11:52:22
【问题描述】：

第一次在这里为我发帖，首先我要感谢这个很棒的社区多年来为我提供的帮助。

我已经处理了多段 javascript 代码，但没有了解该语言，对此我深表歉意。我的问题是我猜很基本，但这次我自己找不到答案..

我的网站主页上有这两个 div

.MainTitle {
    position: relative;
    margin: auto;
    margin-top:200px;
    padding:0;
    width:50%;
    font-size: 100px;
    font-weight:300;
    color: #2f3542;
    text-align:center;
}
.SubTitle {
    position: relative;
    margin: auto;   
    padding:0;
    width:50%;
    font-size: 50px;
    font-weight:300;
    color: lightgrey;
    text-align:center;
}
.country {
    position: relative;
    margin: auto;   
    padding:0;
    width:50%;
    font-size: 50px;
    font-weight:300;
    color: lightgrey;
    text-align:center;
}

<div class="MainTitle">
    HERE MAIN TITLE
</div>
<div class="SubTitle">
    <span class="country"><a href="fr/pages/about.php">FR</a></span>
    <span> | </span>
    <span class="country"><a href="fr/pages/about.php">EN</span>    
</div>

我想要做的是： 1. 使用我可以设置的时间和不透明度淡入主标题； 2. 还可以使用时间/不透明度淡入字幕，但一旦出现主标题

我希望在页面加载后自动触发这两个操作。也许在 Maintitle 淡入之前以及 Maintitle 和 Subtitle 淡入之间的时间安排可能很有用。

如果有人可以帮助我，非常感谢！

雨果

【问题讨论】：

标签： javascript html css opacity

【解决方案1】：

<html>

<head>
  <style>
div {
    display:none;
}

</style>

<body>

<div class="MainTitle">
        HERE MAIN TITLE
    </div>
    <div class="SubTitle">
    <span class="country"><a href="fr/pages/about.php">FR</a></span>
    <span> | </span>
    <span class="country"><a href="fr/pages/about.php">EN</span>    
    </div>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(window).load(function(){

$(document).ready(function() { 
   $('.MainTitle, .SubTitle').each(function(fadeInDiv){
     $(this).delay(fadeInDiv * 500).fadeIn(1000);
   });
});

    });
  </script>


</body></html>

【讨论】：

太棒了！非常感谢！
如果此答案有用，请查看。所以，我们可以给出更清晰的答案