Ajaxed div hide and show hides only after div load

I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video开发者_C百科 won't start from beginning after every page load. The only way I was able to do this was with this sort of code:

$(document).ready(function(){


$.ajaxSetup ({  
         cache: false  
         }); 

//For loading
     var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";  

 //  Var
    var loadPage1 = "page1.html";

//  Load page
    $("#page1").click(function(){
            $("#content").hide(2000);
            $("#content").html(ajax_load).load(loadPage1);
            $("#content").show(2000);
});

All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).

So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.

Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.

Thanks.

Show the element in the load callback handler. i.e:

$("#page1").click(function(){             
    $("#content").hide();             
    $("#content").html(ajax_load).load(loadPage1, function(){
        $("#content").show(2000)
    });
}); 

.load() takes 2 arguments, the URI and a callback to fire after load. API is found here: http://api.jquery.com/load/

function() {
    $("#content").hide(2000);
    $("#content").html(ajax_load).load(loadPage1, function() {
        $("#content").show(2000);
    });
}