Jade로드로 fadeOut 현재 페이지 및 slideDown 다음 페이지 전환 효과 만드는 방법

Question

Q : 버튼을 클릭 할 때 어떻게 현재 페이지를 페이드 아웃하고 다음 페이지로 슬라이드 다운 할 수 있습니까? 나는 페이지 전환을 fadeOut 홈페이지로 만들고, 새 페이지를로드() 한 다음 slideDown()을 "커튼"과 같은 다음 페이지로 만들고 싶습니다. 나는 그것을 fadeOut하고 fadeIn으로 가져올 수 있지만 어떻게 든 다음 페이지 slideDown을 만들려고 할 때 작동하지 않습니다. 나는 css 스타일이 slideDown에 대한 요소를 숨길 필요가 있다고 생각했지만 전이 slideDown 효과를 호출하기 전에 봇 (bot) 'display : none'과 'hide()'를 시도했지만 운이 없었습니다.

나의 현재 용액 :

(홈페이지)

<div id="content"> 
<a class="btn btn-1 btn-1a about" href="about.php" id="aboutbtn">About me</a> 
</div> 

(Aboutpage)

<div class="aboutbg"> 
<a class="btn btn-2 btn-1b about" href="home.php" id="backbtn">Back</a> 
</div> 

JS :

$('#aboutbtn').click(function(){ 

    $('body').fadeOut(function() { 
     $(this).load('about.php').fadeIn(); 
    }); 

    return false; 

}); 

있도록 다른 솔루션이 이 일이 발생하거나 추가 내 현재 상태로. 나는 무엇을 놓치고 있습니까?

이 내가 찾을 수있는 가장 가까운 영감 사이트입니다 내 문제에 대해 설명합니다

http://www.nicolasdesle.be/을 - 나 - 대략 125를 클릭합니다.

질문이 있으십니까? 그냥 물어봐!

미리 감사합니다. /// E!

Answer 1

당신은

.aboutbg{ 
      display: none; 
     } 

그런 다음이 사업부에 페이드 아웃을 수행 할 스크립트를 변경하려면 jQuery를로드를 통해로드 된 내용을 숨기도록 홈 페이지에 code.Add CSS 두 변경해야 콘텐츠가 있습니다.

$('#aboutbtn').click(function() { 
$("#content").fadeOut(500,function(){ 
    $('body').load('about.php', function() { 
    $(".aboutbg").slideDown(1000); 
}) 
}); 

return false;});