Question

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

当其中一个div滑落而我点击另一个时，我隐藏了第一个div（slidingUp），然后打开另一个div（slidingDown）但是，此时它就像一个div向下滑动时，另外，同时也在向上滑动。

有没有办法告诉jQuery等待完成一个div的滑落然后才开始滑向另一个div？

Answer 1

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

编辑：你有没有检查过手风琴插件（如果那是你想要做的）？

Answer 2

你应该像这样链接

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

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

// etc

当然，您可以根据需要使用递归函数，包含动画队列的数组等来增加它的效果。

Answer 3

一个更清洁的例子，并且在动画之间有延迟：

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

Answer 4

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

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

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

请参阅文档：http://docs.jquery.com/Effects/slideUp

Answer 5

大多数jquery函数都有一个回调参数，你只需将函数传递给它。

Answer 6

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

Answer 7

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

中看到

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

Answer 8

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

$(this).slideDown( speed, function(){
    $(this).slideUp();
});

完成一个动画然后启动另一个动画

8 个答案: