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

Question

我想在单击链接后向上滑动一个 div，然后向下滑动另一个 div，然后转到下一页。
问题:在动画完成之前加载新页面。
问题:我该怎么做？
我应该使用 PreventDefault 然后通过某种方式恢复它吗？

这是网址: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 值关闭。)