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>

标题在打开的窗口中淡入

1 个答案: