jQuery .fadeOut applied after page switch
<p>I'm using the method of loading content as described here <a href="http://css-tricks.com/rethinking-dynamic-page-replacing-content/" rel="nofollow">http://css-tricks.com/rethinking-dynamic-page-replacing-content/</a> however I'm running into the issue of the jQuery function .fadeOut occurring AFTER the content is changed. So when the user clicks the navigation link the content changes, then the new content fades out then fades back in. In the demo the content fades out, changes, then the new content fades in.</p>

<p>Here's the only part of the jQuery that I've changed to fit my site.</p>

<pre><code>function loadContent(href){
    $mainContent
            .find("#guts")
            .fadeOut(750, function() {
                $("header nav ul li a").removeClass("current");
                console.log(href);
                $("header nav ul li a[href$='"+href+"']").addClass("current");
                $mainContent.hide().load(href + " #guts", function() {
                    $mainContent.fadeIn(750, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                });
            });
}
</code></pre>

<p>Edit: I forgot to add, this script appears to be working fine in Firefox, but not in Chrome</p>
