jQueryはアニメーションが完了した後に何かを行います

Question

私は4つのdivを持つjQueryアニメーションを使用しています。それらの背景イメージは異なる速度で同時にアニメーションされるため、

最後に完成したアニメーションから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 
}); 

ここでの問題は、それが完了するまでに4つのアニメーションを待ってwhithout「何かをする」を実行するということです。

ありがとうございました。

Answer 1

あなたがちょうどあなたがそれらのすべてに待ちたい場合は、jQueryのアニメーションが

$('#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); 
    }); 
}); 

のように使用することができ約束を、返すことができ

$('#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'); 

}); 

を行うことができますように、第2は、常に、最長がかかります

あなたは多くの要素にこれを行うにする場合、このようなものは

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