在 jQuery 个动画完成后做一些事情

Question

我有一个 jQuery 动画，其中有 4 个 div，它们的背景图像以不同的速度同时动画，所以一个接一个随机完成。

现在我想在最后一个完成的动画 3 秒后执行一个函数。

<script>
$('#btn').click(function(){
    $('#div-1').animate({'background-position-y': '4000'}, 8000, 'easeInOutQuart');
    $('#div-2').animate({'background-position-y': '4000'}, 10000, 'easeInOutQuart');
    $('#div-3').animate({'background-position-y': '4000'}, 9000, 'easeInOutQuart');
    $('#div-4').animate({'background-position-y': '4000'}, 7000, 'easeInOutQuart');
}, function(){
    // Do something
});

这里的问题是它将执行 "Do something" 而无需等待 4 个动画完成。

谢谢。

Answer 1

第二个总是需要最长的，所以你可以这样做

$('#btn').click(function(){
    $('#div-1').animate({'background-position-y': '4000'}, 8000, 'easeInOutQuart');
    $('#div-2').animate({'background-position-y': '4000'}, 10000, 'easeInOutQuart', function() {
        // all should be done, as this one is the longest running animation
        setTimeout(function() {
             // wait an additional 3 seconds
        }, 3000);
    });
    $('#div-3').animate({'background-position-y': '4000'}, 9000, 'easeInOutQuart');
    $('#div-4').animate({'background-position-y': '4000'}, 7000, 'easeInOutQuart');

});

如果你想等待所有这些，jQuery 动画可以 return 承诺，可以像

$('#btn').click(function(){
    var arr = [
        $('#div-1').animate({'background-position-y': '4000'}, 8000, 'easeInOutQuart').promise(),
        $('#div-2').animate({'background-position-y': '4000'}, 10000, 'easeInOutQuart').promise(),
        $('#div-3').animate({'background-position-y': '4000'}, 9000, 'easeInOutQuart').promise(),
        $('#div-4').animate({'background-position-y': '4000'}, 7000, 'easeInOutQuart').promise()
    ];

    $.when.apply($, arr).then(function() {
        // all complete
        setTimeout(function() {
             // wait an additional 3 seconds
        }, 3000);
    });
});

如果您打算对许多元素执行此操作，类似的内容可能会有用

$.fn.anim = function(speed) {
 return this.animate({'background-position-y': '4000'}, speed, 'easeInOutQuart').promise();
}

$('#btn').click(function(){
    $.when.apply($, [
        $('#div-1').anim(8000),
        $('#div-2').anim(10000),
        $('#div-3').anim(9000),
        $('#div-4').anim(7000)
    ]).then(function() {
        setTimeout(function() {
             // wait an additional 3 seconds
        }, 3000);
    });
});

在 jQuery 个动画完成后做一些事情

Do something after jQuery animations complete

jquery

jquery-animate