完成所有动画后回调

Callback after all animates done

本文关键字：回调 动画      更新时间：2024-06-04

代码

在do_animations中的所有animate方法完成后，我需要帮助进行回调。对于一个animate，我可以调用promise和done函数。我尝试使用$.Callbacs，但我不知道如何从fire方法中生成promise对象。

function random_num(a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a;
}
function do_animations() {
    var n = random_num(1, 5);
    for (var i = 0; i < n; i++) {
        var width = random_num(-50, 50);
        $('#rec').animate({'left': '+=' + width + 'px'}, 300);
    }
}
$(document).ready(function(){
    do_animations();
});

最佳解决方案是

do_animations().done(function(){ ... });

使用promise（）：

演示

function do_animations() {
    var n = random_num(1, 5),
        $rec = $('#rec');
    for (var i = 0; i < n; i++) {
        var width = random_num(-50, 50);
        $rec.animate({'left': '+=' + width + 'px'}, 300);
    }
    return $rec.promise();
}
$(document).ready(function(){
    do_animations().done(function(){ alert("All animations done!") });
});
相关文章：