jQuery preventDefault stops rest of code working

Question

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!!

Answer 1

You need to put the navigate method call in the the animation callback.

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

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

If you don't do this, the animation and the navigation will happen at the same time.

Rich

Answer 2

Try using the callback function parameter of the animate function to implement navigation once the animation is complete (from the hip):

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

});