I have this code where I am using jQuery to navigate to the next page, because I want some effects to take place before that happens. The problem is, that everything after the prevent.Default(); doesn't seem to work!

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

I need things to happen in that order, so that the animation happens and once it's complete - load the next page...

Does anyone have any ideas? Many thanks in advance?

Tim

Updated code (moves to new page but no animation occurs) ---

$("a").click(function(event){
    event.preventDefault();

    var driver = $(this).attr('href');
    $(".content-center").animate({
        height: "0px"
    }, 500, function(){
        navigate(driver);
    });
});

see: http://bit.ly/aOeYgE

Many thanks for your help!!