Slide wird nicht richtig ausgeführt

[burn4ever]

Hallo,
ich arbeite gerade mit diesem Script hier:
Dynamic Page | Home

Was mich stört ist das erst der Text ausgeblendet wird, dann der neue Text und erst danach der Slide der Bühne ausgeführt wird. Das sieht z.B. nicht so pralle aus wenn man von Menüpunkt "about" nach "home" klickt.

Hier mal das original Skript:

$(function() {

    var newHash      = "",
        $mainContent = $("#section"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#article")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #article", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });

                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');

});

Ich habe versucht das Skript um zu schreiben. Sprich nach ausbelden des Textes den dic skalieren und dann via callback (Funktion start wird ausgeführt) den neuen Text einblenden:

$(function() {

    var newHash      = "",
        $mainContent = $("#section"),
        $pageWrap    = $("#page-wrap"),
        $skalierer   = $("#article"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#article")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #article", function() {
                         
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                           
                        }, start);

                        function start() {
                         $mainContent.fadeIn(200, function() {
                                     // Animation complete
                         });
                     }
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
$(window).trigger('hashchange');

});

Geht auch soweit, nur leider wird der div nicht mehr richtig in der Größe skaliert
($pageWrap.animate)

Hat jemand ein Idee wie ich das fixen kann?