如何在jQuery动画完成后执行.click()？

Question

我想在点击链接后滑动一个div,然后再滑动另一个div,然后转到下一页.
问题:在动画完成之前加载新页面.
问题:我该怎么办？
我应该使用preventDefault然后以某种方式恢复它吗？

这是URL:http://www.jolandaschouten.nl/wordpress

这是代码,现在只对第一个菜单项实现:

jQuery(document).ready(function($){

    var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact");

    console.log(allDivs);

    $("li.page-item-11 a").click(slideUp);

    function slideUp(){
        allDivs.slideUp(500, slideDown);        
    }
    function slideDown(){            
        $("#introductie").slideDown(500);
    }
});

ps:我不想使用AJAX,因为SEO和浏览器导航问题.点击应该真正导致进入下一页.

Answer 1

返回false以防止默认操作(在链接之后),使用闭包锁定到单击的项目,然后手动跟随它:

$("li.page-item-11 a").click(function(){
    var clickedAnchor = this;
    allDivs.slideUp(500, function(){
        $("#introductie").slideDown(500,function(){
            location.href = clickedAnchor.href;
        });
    });
    return false;
});

(第一个回调实际上不必是像这样的内联函数文字,但其他回调是为了在clickedAnchor值周围闭合.)