jQuery delay in firing function
<p>I have the following script in my page that's part of the "DynamicPage" script, and I've added a part to call a function to make my image slider script run. It's in here to resolve a problem I had before. It works, except for a delay of a split second once the page loads. The images below give you an idea of what I mean.</p>

<p><a href="http://i.imgur.com/uhxVu.png" rel="nofollow" title="As the page loads">As the page loads</a></p>

<p><a href="http://i.imgur.com/cB6c5.png" rel="nofollow" title="What it should look like/what it looks like after about half a second">What it should look like/what it looks like after about half a second</a></p>

<p>Here's the script</p>

<pre><code>$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        sliderInit = true,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("navbar").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("#guts").slideUp(5, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.slideDown(5, function() {
                        $pageWrap.animate({height: baseHeight + $mainContent.height() + "px" }, function() {
                            $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000});
                        });
                    });
                    $("navbar a").removeClass("current");
                    $("navbar a[href='"+newHash+"']").addClass("current");
                });
            });
        };
    });
    $(window).trigger('hashchange');
});
</code></pre>
