Wie fadeOut aktuelle Seite und slideDown nächste Seite Übergangseffekt mit JQuery load

Question

F: Wie kann ich eine FadeOut aktuelle Seite und SlideDown mit der nächsten Seite, wenn ich auf eine Schaltfläche klicken. Ich möchte die Seite Übergang FadeOut Homepage machen, laden() die neue Seite und dann slideDown() die nächste Seite wie ein "Vorhang". Ich kann es zu FadeOut und dann FadeIn, aber irgendwie, wenn ich versuche, machen Sie die nächste Seite SlideDown es funktioniert nicht. Ich habe herausgefunden, dass Ihr CSS-Design das Element für slideDown verstecken muss, aber ich habe versucht, bot 'display: none' und 'hide()' vor dem Aufruf des Übergangs SlideDown-Effekt, aber ohne Glück.

Meine aktuelle Lösung:

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

}); 

Gibt es eine alternative Lösung zu machen das passiert oder fügt hinzu zu meinem jetzigen. Was vermisse ich?

Dies ist die nächste Inspiration Website ich das beschreibt mein Problem gefunden:

http://www.nicolasdesle.be/ - Klicken Sie auf -über mich.

Fragen? Einfach fragen!

Vielen Dank im Voraus, /// E!

Answer 1

Sie müssen zwei Änderungen an Ihrem code.Add CSS zu Ihrer Homepage machen, den Inhalt verstecken, die Sie über jQuery Last laden

.aboutbg{ 
      display: none; 
     } 

Dann wird Ihr Skript ändern fadeOut auf dem div auszuführen, die hat habe Inhalt bekommen.

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

return false;});