살아 움직이는듯한 div에서 페이드한다

Question

나는 페이지가로드 될 때 div가 슬라이드되지만, 움직일 때 페이드 인하는 방법을 생각할 수 없다. 나는 다른 fadIn 효과를 시도했지만 아무것도 작동하지 않는 것 같습니다.

$(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; 
} 

See this fiddle.

Answer 2

데이비드 존스 (David Jones)의 대답은 올바른 것입니다. 그러나 나는 그의 대답에 몇 가지를 추가 할 것이다.

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를 (그것이 fadeIn 완료하고 실행하는 제 다음 기다려) 애니메이션을 (실행할 대답)

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