How to make fadeOut current page and slideDown next page transition effect with JQuery load

Q: How can i make a fadeOut current page and slideDown with next page when i click a button. I want to make the page transition fadeOut homepage, load() the new page and then slideDown() the next page like a "curtain". I can get it to fadeOut and then fadeIn, but somehow when i try do make the next page slideDown it doesn't work. I did figure out that your css styling need to hide the element for it to slideDown, but i tried bot 'display: none' and 'hide()' before calling the transition slideDown effect but with no luck.

My current solution:

(Homepage):

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

});

Is there an alternative solution to make this happen or addition to my current one. What am i missing?

This is the closest inspiration site i could find that describes my problem:

http://www.nicolasdesle.be/ - Click on -about me.

Questions? Just ask!

Thanks beforehand, /// E!

Solution

You need to make two changes to your code.Add CSS to your home page to hide the content that you are loading via jQuery load

.aboutbg{
            display: none;
        }

Then change your script to perform fadeOut on the div which has got content.

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

return false;});