Заголовки исчезают при открытии окна - PullRequest
Новая
       8

Заголовки исчезают при открытии окна

0 голосов
/ 30 ноября 2018

Первый пост для меня, я начну с того, что поблагодарить это удивительное сообщество за помощь, которую я нашел уже много лет.

Я обработал несколько фрагментов кода 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. Добавить Maintitle с синхронизацией и непрозрачностью, которые я могу установить;2. Также добавьте субтитры с таймингом / непрозрачностью, но как только появится Maintitle

Я хочу, чтобы эти два действия автоматически запускались после загрузки страницы.Может быть полезно время до появления Maintitle и между Maintitle и Subtitle.

Большое спасибо, если кто-то может мне помочь в этом!

Уго

1 Ответ

0 голосов
/ 30 ноября 2018 
<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>
...