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：由于 SEO 和浏览器导航问题，我不想使用 AJAX。单击实际上应该导致转到下一页。

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 值。）

Answer 2

您可以做的一件事是将整个动画过程包装在 .animate() 中，然后使用回调直接进入新页面。 .animate() 下的回调在动画完成时发生。这应该会给你你正在寻找的行为。

Answer 3

检查内嵌评论。简化了初始选择。要加载新页面，请使用 slideDown 回调。

function slideUp(){
    allDivs.slideUp(500, slideDown);
}
function slideDown(){
    $("#introductie").slideDown(500, function() {
        /* load the new page here */
    });
}
$(function() {
    //you can select multiple elements like this
    var allDivs = $("#introductie, #agenda, #werk, #onderwijs-organisatie, #publicaties, #links, #contact");
    console.log(allDivs);
    $("li.page-item-11 a").click(slideUp);
});

Answer 4

非常感谢大家的帮助！

我花了一段时间才得到正确的代码（有点......），因为当新页面尚未加载时没有太多可以向下滑动的内容，所以我无法使用slideDown回调。

我现在有一个临时解决方案：我使用 if 语句来确定我在哪个页面上，然后执行动画的后半部分，即幻灯片部分。对于动画的第一部分，即 SlideUp 部分，我将“location.href”作为回调，并使用“return false”，如 Phrogz 所示。

像这样：

menuLinks.click(function() 
{
var clickedAnchor = this;

            allDivs.slideUp(750);
            mainDiv.fadeOut(500, function() 
            {
                location.href = clickedAnchor.href;
            }); 
return false;    
});

然后，在页面重新加载之后（还有更多 if 语句，每个页面一个）：

if (currentLocation.substr(0,52) == introductiePage) 
    {       
        introductieMenu.css({color:"#FF844A"});
        introductieDiv.hide();
        mainDiv.hide(function()
        {
            mainDiv.fadeIn(750);        
            introductieDiv.slideDown(750);
        });         
    }

现在我陷入困境，因为我必须找出一种方法来实现从一个页面到另一个页面之间的差异，从一个子页面到另一个子页面，从一个页面到另一个子页面，等等。但这将是另一个线程。