Question

我有两个div从左边开始动画，此刻它们同时进入另一个下方，虽然我想在第一次完成后立即开始第二次。

下面是代码：

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

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

任何帮助都会很棒！

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

Answer 2

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

Answer 3

您可以使用完整的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);
});

Answer 4

将函数参数添加到动画调用

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

Jquery在其他完成后动画div

4 个答案: