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 here

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