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

Question

我想要一些文本在我的页面加载时同时滑动和淡入，但我什么也做不了，甚至无法让淡入动画工作。

HTML:

<div id="animate" 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;
}

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

JS:

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

我不明白为什么我在页面加载时无法发生任何事情。这可能是一个愚蠢的错误，因为我是网页设计的初学者，但我真的很感激帮助！

Answer 1

您已经在使用jQuery，所以您应该使用他们的方法；可以通过输入.slideDown()方法

来实现这个下滑显示

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

#animate {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="animate">
  <div class="cantSee">
    <h1>ELEVATEDMOVEMENT</h1>
    <h3>Pushing the limits of movement</h3>
    <div>
      <a href="#">Shop</a>
    </div>
  </div>
</div>

Answer 2

如果其他人遇到此问题并想知道如何使 fadeIn 和 slideDown 在加载时工作，这就是实现该效果的方法：

HTML:

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

jQuery:

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

CSS:

#animate {
  display: none;
}

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

I want text to do a sort of fadeIn and .slideDown at the same time when page loads

html

css

jquery

animation

jquery-animate