在其他完成后立即为 div 设置动画答案

【问题标题】：Jquery animate div right after other finishes在其他完成后立即为 div 设置动画
【发布时间】：2014-01-13 13:59:03
【问题描述】：

我有 2 个 div 动画从左侧进入，此时它们都同时进入，一个在另一个之下，但我希望第二个在第一个完成后立即开始。

代码如下：

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000);

$("#flyin2").animate({
    left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
}, 2000);

任何帮助都会很棒！

【问题讨论】：

标签： jquery html jquery-animate slide

【解决方案1】：

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000, function() {
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
    }, 2000);
});

放到第三个参数下（完成），如图here.你也可以这样：

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, {duration:2000}, {complete:function() {
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
    }, 2000);}
});

【讨论】：

这行得通，太棒了，但是有没有办法让第二个 div 隐藏起来，直到第一个 div 完成，此时无论动画如何，它们都是可见的，这有意义吗？
@owen：更新了下面的答案。请检查一下
@owen 我建议你学习基本的JQuery，或者你看看docs

【解决方案2】：

你可以使用完整的jquery animate。

更新：隐藏文档准备好的元素

$(document).ready(function(){
$("#flyin2").hide();//hide second element
});


$("#flyin1").animate({
left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000,function(){
//on animation complete
$("#flyin2").show();//show second element
$("#flyin2").animate({
left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
}, 2000);
});

【讨论】：

我可能是错的，但不应该everything进入document.ready吗？
@ManofSnow：我不确定他是否想要页面加载或任何功能上的动画。在页面加载时，是的，它应该在文档中准备好
+1 很遗憾，当您发布此消息时我还在学校，但它是正确答案：P

【解决方案3】：

jQuery 的animate() 函数一共支持4 个参数。您会注意到其中之一可以是动画完成时将调用的函数：

complete
输入：Function()
动画完成后调用的函数完成。

可以使用完整的回调函数：

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000, function() {  
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
    }, 2000);
});

【讨论】：

【解决方案4】：

动画调用添加函数参数

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000, function() {
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
     }, 2000);
);

【讨论】：