打开窗口时标题淡入

Question

首先，我要感谢这个很棒的社区多年来为我提供的帮助。

我已经处理了多段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.也可以使用定时/不透明度淡入字幕，但是一旦出现字幕

我希望页面加载后自动触发这两个操作。 也许在主标题淡入之前以及在主标题和副标题淡入之间进行计时会很有用。

非常感谢有人能帮助我！

雨果

Answer 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>