jQuery, animasyonlar tamamlandıktan sonra bir şeyler yapın

Question

4 div, arka plan resimlerinin aynı anda farklı hızlarda animasyon uyguladığı bir jQuery animasyonu var, böylece biri rastgele bir şekilde tamamlayacaktır.

Şimdi, son tamamlanan animasyondan 3 saniye sonra bir işlev yürütmek istiyorum.

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

Buradaki sorun bu tamamlamak için 4 animasyonlar için bekleyen whithout "Bir şeyler yapın" yürütme olacaktır.

Teşekkürler.

Answer 1

ikincisine daima sadece hepsini beklemek istiyorsanız

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

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

gibi kullanılabilecek sözler, dönebilirsiniz yapabileceği şekilde, en uzun sürer

birçok unsurları bunu niyetinde ise böyle bir şey

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