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

Question

我希望在页面加载的同时使文本向下滑动并淡入淡出，但什么也没发生，甚至不能让淡入淡出动画起作用。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";
});

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

Answer 1

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

.slideDown()

$(window).on('load', function() {
  $('#annimate').slideDown(1000);
});

#annimate {
  display: none;
}

Answer 2

[如果其他人遇到这个问题，并想知道如何在加载时使fadeIn和slideDown一起工作，这就是您可以达到的效果：HTML：

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

jQuery：

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

CSS：

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