jquery - 我希望文本在页面加载时同时执行某种fadeIn和.slideDown

我希望在页面加载时同时使文本向下滑动并淡入淡出，但什么也没发生，甚至使淡入淡出动画无法正常工作。

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";
});

我不明白为什么页面加载时什么也没发生。因为我是网页设计的初学者，所以这可能是一个愚蠢的错误，但是我真的很乐于助人！

最佳答案

您已经在使用jQuery，因此您应该使用它们的方法。您可以向下滑动并使用输入.slideDown()方法显示

$(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>