Animasyon yaparken, sadece tüm elementler ne zaman yapılırsa geri çağırmanın nasıl tetiklenir?

Question

jQuery'de animasyon yaparken, yalnızca TÜM öğeler her öğe için değil, animasyon yapılırken geri çağırma işlemi için en iyi uygulama nedir? Örneğin

:

$('.someElements').fadeOut('fast', function() { 
    // dont do this until ALL elements are done fading 
} 

Answer 1

Bu denemek için bir pasajı olabilir ... yapmanız gereken herhangi işlemi geri arama özel bir kod olabilir Geri adım atmak zorundasınız.

DÜZENLEME (başka şekilde):

Ayrıca tüm unsurları ancak son birini yakalayabilirsiniz.

$('.someElements').not(.someElements:last).fadeOut(); 

ve sonra yalnızca kendisine geri arama ile

$('.someElements:last').fadeOut(fast, function(){ 
    // do something, it's the end of the world 
}; 

Answer 2

Bu uyarınca, büyük bir sorudur jQuery docs:

birden elemanları animasyonlu ise, o eşleşti başına geri arama kez gerçekleştirilir dikkat etmek önemlidir öğe, bir bütün olarak animasyon için bir kez değil.

yapabildin bu kısıtlamaya bir çözüm için:

• Numaralandırma .someElements eşleşen tüm öğeleri ve her biri için ayrı bir geri arama kurdu.
• Toplam kaç tane geri arama olduğunu takip eden count değişkenine sahip olursunuz. sayım 0'a geldiğinde o 0.

ulaşıncaya kadar geri arama olarak

, bütün geri aramalar tamamlandıktan, count eksiltme ve tüm elemanlar animasyon yapılır da sağlanmış olacaktır.

var numberOfElements = $('.someElements').length; 

$('.someElements').fadeOut(fast, function() { 
    if(numberOfElements-- > 0) return; 
    alert('call the Fireman!'); 
}); 

uyarı sonuna kadar sadece bir yer tutucudur mı: Buradan, daha sonra

Answer 3

Daha yeni jQuery bültenleri (sürüm 1.6 ve sonrası) bir promise fikrini içerir bir fadeout ekleyin. Bu işlevi kullanmak bir geçici çözüm ihtiyacını ortadan kaldırır. Örneğin:

// define the animation on many elements 
$('.someElements').fadeOut('fast'); 

// define the promise that is called once all element animations are done 
$('.someElements').promise().done(function() { 
    // put callback actions here 
});