JQuery Fade in and Slide Down Название

Question

Я пытаюсь заставить элемент h1 моей веб-страницы сползать сверху и исчезать одновременно. Ive пробовал использовать анимацию, и он не работал. Эффект, который я собираюсь, похож на эффект на этой странице яблока. «Тонкий, светлый, эпический». Обратите внимание на эффект 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

Я никогда не нужно делать и в то же время, но если бы я сделал я бы добавьте класс, который обрабатывал переход непрозрачности.

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

Answer 2

Вот ваше решение. Установить 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