CSS

Question

我试图让我的网页的h1元素从顶部向下滑动并同时淡入。香港专业教育学院尝试使用动画，它没有工作。我想要的效果类似于这个苹果页面上的效果。 “瘦。轻。史诗。”注意效果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;

}

Answer 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

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

Jquery淡入并向下滑动标题

2 个答案:

CSS

的jQuery