【问题标题】：Jquery Fade in and Slide Down TitleJquery 淡入和向下滑动标题
【发布时间】：2015-11-19 12:44:55
【问题描述】：

我正在尝试让我的网页的 h1 元素从顶部向下滑动并同时淡入。我试过使用动画，但没有奏效。我要的效果和这个apple page的效果差不多。 “薄。轻。史诗。”注意效果http://www.apple.com/ipad-pro/ 现在，它会按照我的意愿淡入，但它根本不会从顶部滑落。

jquery：

$(document).ready(function doBoth() {
   "use strict";
   $('h1').hide().slideDown(1000).fadeIn(1000);

   $('a').hide().slideDown(1000).fadeIn(2500);
 });

HTML：

<div class="jumbotron">
    <div class="container">

        <h1>Photography 101</h1>
        <a href = "#">Enter</a>

      </div>

  </div>

CSS：

.jumbotron .container {
  position: absolute;
  top: 5px;
  left: 440px;
  text-align:center;

}

.jumbotron h1 {
  color: #000000;
  font-size: 66px;  
  font-family: 'Helvetica', sans-serif;
  font-weight: lighter;
  font-style: oblique;
  text-align:center;


}

.jumbotron a {
    top:10px;
    font-size: 35px;
    font-style: oblique;
    font-weight: lighter;
    color: #000000;

}

【问题讨论】：

使用 animate.css 并且您使用document.ready 的方式不是valid.. 函数必须是anonymous 或named。你不能像function doBoth() 那样立即定义函数，它可以像$(document).ready(function(){....}); 一样

标签： javascript jquery

【解决方案1】：

这是您的解决方案。设置queue:false同时运行动画

$(document).ready(function(){
   "use strict";    
   $("h1").hide().slideDown({duration:2000, queue:false});
    $("h1").hide().fadeIn({duration:2000, queue:false});
    $("a").hide().slideDown({ queue: false, duration: 2000 });
    $("a").hide().fadeIn({duration:2000, queue:false});
 });

JsFiddle here

【讨论】：

【解决方案2】：

我从来不需要同时做这两个，但如果我这样做了，我会添加一个处理不透明度转换的类。

CSS

.jumbotron h1, .jumbotron a{
    opacity:0;
    display:none;
    transition:1s opacity ease;
}

.jumbotron h1.visible, .jumbotron a.visible{
    opacity:1;
    transition:1s opacity ease;
}

jQuery

$(document).ready(function() {
   $('h1, a').addClass('visible').slideDown(1000);
 });

【讨论】：