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

q: how can make fadeout current page , slidedown next page when click button. want make page transition fadeout homepage, load() new page , slidedown() next page "curtain". can fadeout , fadein, somehow when try make next page slidedown doesn't work. did figure out css styling need hide element slidedown, tried bot 'display: none' , 'hide()' before calling transition slidedown effect 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 alternative solution make happen or addition current one. missing?

this closest inspiration site find describes problem:

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

questions? ask!

thanks beforehand, /// e!

you need make 2 changes code.add css home page hide content loading via jquery load

.aboutbg{             display: none;         } 

then change script perform fadeout on div has got content.

$('#aboutbtn').click(function () { $("#content").fadeout(500,function(){      $('body').load('about.php', function () {     $(".aboutbg").slidedown(1000); }) });  return false;});