完成一个动画然后开始另一个答案

【问题标题】：Finish one animation then start the other one完成一个动画然后开始另一个
【发布时间】：2009-01-20 16:02:53
【问题描述】：

我有两个 div 和两个单独的链接，它们触发 div 的 slideDown 和 slideUp。

当其中一个 div 向下滑动并单击另一个 div 时，我会隐藏第一个 div (slidingUp) 然后打开另一个 div (slidingDown) 但是，此时就像一个 div 向下滑动时，其他，也在同一时间向上滑动。

有没有一种方法可以告诉 jQuery 等待完成一个 div 的向下滑动，然后才开始向上滑动另一个？

【问题讨论】：

看看你已经拥有的东西可能会有用。

【解决方案1】：

$('#Div1').slideDown('fast', function(){
    $('#Div2').slideUp('fast');
});

编辑：您是否检查过手风琴插件（如果您正在尝试这样做）？

【讨论】：

【解决方案2】：

你应该这样链接它

function animationStep1()
{
   $('#yourDiv1').slideUp('normal', animationStep2);
}

function animationStep2()
{
   $('#yourDiv2').slideDown('normal', animationStep3);
}

// etc

当然，您可以根据需要使用递归函数、保存动画队列的数组等来为它增添趣味。

【讨论】：

请，请，请只需输入animationStep2，而不是function () { animationStep2(); }。为什么要创建一个全新的函数来调用另一个函数？

【解决方案3】：

一个更简洁的例子，动画之间有一个延迟：

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);

【讨论】：

【解决方案4】：

当第一个效果完成时，您可以使用回调来触发下一个效果：

$("#element1").slideUp(
    "slow", 
    function(){
        $("#element2").slideDown("slow");
    }
);

在本例中，定义为 slideUp 方法的第二个参数的函数在 slideUp 动画完成后被调用。

查看文档：http://docs.jquery.com/Effects/slideUp

【讨论】：

【解决方案5】：

大多数 jquery 函数都有一个回调参数，你可以只传递一个函数。

【讨论】：

【解决方案6】：

$("#thisDiv").slideUp("slow", function() {
    // This function is called when the slideUp is done animating
    $(this).doNextThing();
});

【讨论】：

【解决方案7】：

这方面的一个例子可以在JQuery for Beginners - Day 2中看到

这些教程有 15 天，它们是一个很好的资源。享受吧！

【讨论】：

【解决方案8】：

使用函数的第二个参数：回调。例如，

$(this).slideDown(速度，函数(){ $(this).slideUp(); });

【讨论】：

这会将同一个 div 向下滑动然后再向上滑动，这不是那个家伙问的，嗯？