Я хочу, чтобы текст выполнял своего рода fadeIn и .slideDown одновременно при загрузке страницы - PullRequest
Новая
       30

Я хочу, чтобы текст выполнял своего рода fadeIn и .slideDown одновременно при загрузке страницы

0 голосов
/ 09 января 2020

Я хочу, чтобы текст вызывал slideDown и fadeIn одновременно, когда загружается моя страница, но я не могу заставить что-либо произойти или даже заставить работать анимацию fadeIn. HTML: 

<div id="annimate" class="landing-text">
    <div class="landingText cantSee">
      <h1 class="newFont oColor textShadow">
      ELEVATEDMOVEMENT</h1>
      <h3 class="newFont oColor textShadow">
      Pushing the limits of movement</h3>
      <div class="container">
      <a href="#" class="btn btnColor    
      btn-lg newFont">
      Shop</a>
      </div>
    </div>
</div>

CSS: 

.cantSee
{
    opacity: 0.0;
}

.annimateText
{
    opacity: 1.0;
    transition: opacity 0.5;
}

JS: 

$(window).load(function() {
    var div = document.getElementById("annimate");
    div.className += " annimateText";
});

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

Ответы [ 2 ]

1 голос
/ 09 января 2020

Вы уже используете jQuery, поэтому вы должны использовать их методы; Вы можете выполнить это скольжение вниз и отобразить с помощью ввода .slideDown() method 

$(window).on('load', function() {
  $('#annimate').slideDown(1000);
});
#annimate {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="annimate">
  <div class="cantSee">
    <h1>ELEVATEDMOVEMENT</h1>
    <h3>Pushing the limits of movement</h3>
    <div>
      <a href="#">Shop</a>
    </div>
  </div>
</div>
0 голосов
/ 09 января 2020

Если кто-то еще сталкивался с этим и хотел знать, как заставить fadeIn и slideDown работать под нагрузкой, вот как вы можете добиться этого эффекта: HTML: 

<div id="annimate">
      <h1>Text</h1>
      <h3>More text</h3>
      <div class="container">
        <a href="#">Shop</a>
      </div>
</div>

Jquery: 

$(window).on('load', function() {
  $('#annimate')
  .css('opacity', 0)
  .slideDown(1000)
  .animate(
    { opacity: 1 },
    { queue: false, duration: 1000 }
  )});

CSS: 

#annimate {
  display: none;
}

...