jQuery .load() Animation

Question

Ich versuche, einfache Seite mit dynamischem Inhalt zu laden. Ich benutze eine .load() Funktion und es funktioniert. Aber jetzt möchte ich eine Animation für das Zeigen der Seite und das Ausblenden der Seite hinzufügen. Beispielsweise wird die Seitenfolie nach rechts ausgeblendet und die Seite slideUp angezeigt.

Hier ist mein Code.

$('.main_nav a').click(function(){ 
    var toLoad = $(this).attr('href')+' .first_section'; 

    $('.content').load(toLoad); 

    return false; 
}); 

Kann mir jemand helfen oder mir die richtige Richtung zeigen?

Zum Beispiel haben wir eine 2 divs (index.php .first_section und about.php .first_section), wenn wir auf 'about.php' Link klicken:

1. Start versteckt Animation (mit .animate() Funktion) für "index.php .first_section"
2. Load "about.php .first_section", aber dieses DIV zeigt nicht
3. Start Animation öffnen (mit .animate() Funktion) für geladene ".first_section"

Answer 1

Machen Sie die .content Abschnitt display:none standardmäßig. Dann in Ihrem javascript:

$('.main_nav a').click(function(){ 
    var toLoad = $(this).attr('href')+' .first_section'; 

    var content = $('.content'); 
    content.slideUp(); // hide the current content 
    content.load(toLoad); 
    content.slideDown(); // show the new content 

    return false; 
}); 

ändern slideUp(), was auch immer Animation Sie das Element verstecken verwenden, und slideDown(), was auch immer Animation Sie das Element zu zeigen, verwenden.