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

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);