淡入動畫格

Question

當頁面加載時，我有一個div滑動下來，但我無法弄清楚如何讓它淡入，因爲它的動畫。我嘗試了不同的時尚效果，但似乎沒有任何工作。

$(function(){ // $(document).ready shorthand 
    $("#headerWrapper").animate({top: '+=200px'}, 1000).fadeIn(); 
     }, function() { 
    $("#headerWrapper").animate({top: '-=100%'}, 1000).fadeIn(); 
}); 

http://jsfiddle.net/oq83qc7o/

Answer 1

你也應該動畫的不透明度。所以將它設置爲0開始，然後當動畫運行時，它將在動畫的時間段內將其更改爲1;

$(function(){ // $(document).ready shorthand 
    $("#headerWrapper").animate({top: '0px', opacity: 1}, 1000); 
     }, function() { 
    $("#headerWrapper").animate({top: '-=100%', opacity: 1}, 1000); 
}); 

也有改變你的一些CSS的：

section#headerWrapper { 
    background: #000; 
    color: #FFF; 
    width:100%; 
    position:fixed; 
    font-size: 30px; 
    z-index:1; 
    padding-bottom:1em; 
    top:-80px; 
    opacity: 0; 
} 

Answer 2

大衛瓊斯的答案是正確的。但我會在他的回答中加入一些事情。

爲什麼你的函數不能按照你想要的方式工作是因爲jQuery的鏈接功能。如果你添加另一個函數給你的初始jQuery對象，它會按照調用順序執行這些函數。

例

$('#myObject').animate().fadeIn() 

將執行動畫（）第一次，然後等待它完成和執行淡入（）

CSS

#headerWrapper { 
    opacity: 0; 
    position: fixed; 

    width:100%; 
    z-index:1; 
    padding-bottom:1em; 
    /* margin-top:-200px; unnecessary for fixed positioned elements */ 

    top: -200px; 
} 

JS（大衛·瓊斯回答）

$(function(){ // $(document).ready shorthand 
    $("#headerWrapper").animate({top: '+=200px', opacity: 1}, 1000); 
}, function() { 
    $("#headerWrapper").animate({top: '-=100%', opacity: 1}, 1000); 
});