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

这里的问题是它会执行＆＃34;做某事＆＃34;等待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动画可以返回promises，可以像

一样使用

$('#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做了一些事情

1 个答案: