JQuery предотвращает дефолт останавливает работу остальной части кода

Question

У меня есть этот код, где я использую jQuery для перехода на следующую страницу, потому что я хочу, чтобы некоторые эффекты имели место до того, как это произойдет. Проблема заключается в том, что все после предотвратит. Default (); не похоже на работу!

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

Мне нужно, чтобы все происходило в таком порядке, чтобы анимация происходила и когда она была завершена - загрузите следующую страницу ...

У кого-нибудь есть идеи? Большое спасибо заранее?

Тим

---

Обновлен код (перемещается на новую страницу, но анимация не выполняется) ---

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

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

см. здесь

Большое спасибо за вашу помощь !!

Answer 1

Вы должны поместить вызов метода navigate в обратный вызов анимации.

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

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

Если вы этого не сделаете, анимация и навигация будут происходить одновременно.

Rich

Answer 2

Попробуйте использовать параметр функции обратного вызова функции animate для реализации навигации после завершения анимации (с бедра):

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

});