Hey all

Using jQuery, is there a way to prevent going to the next page until the animation has finished AND the next page has completely loaded (including images)?

The code below works but it is a bit clunky. You can see what I am trying to achieve here: http://bit.ly/aOeYgE

The first three or so pages work. But when you click to go to the homepage a few times (after it's cached) you will see that it jumps, and the animation isn't very smooth.

As you can see with the code below, the height is immediately set to 0, then when the page has loaded the height is set to 500px. When users navigate to a new page, the height should go back to 0, the next page content should load, and then upon loading the new window, the first bit of code will run again to set the width back to 500px.

$(".content-center").css({"height": "0px"});
    $(window).load(function() {
        if($('.content-center').is(':not(:animated)')) {
            $('.content-center').animate({height: "500px"}, 450);
        }
    });

$("a").click(function(event){
    $(".content-center").animate({height: "0px"}, 500);
        if($('.content-center').is(':not(:animated)')) {
            navigate($(this).attr('href'));
            event.preventDefault();
        }
});

If anyone has any suggestions or alternative ideas to this code then it would be hugely appreciated. Many thanks

Tim