JQuery - birden fazla animasyon tamamlanana kadar geri arama erteleme

Question

Birden çok öğenin animasyon işlemini bitirdikten sonra bir kez daha yürütmek üzere bir geri aramaya ihtiyacım var. şöyle Benim jquery seçicidir: bununla

$('.buttons').fadeIn('fast',function() { 
    // my callback 
}); 

sorun düğmeleri sınıf geri arama çalıştırılmadan önce de soluk gereken tüm bunların unsurları, bir dizi ile eşleşen olmasıdır. Şu anda olduğu gibi, her bir elemanın animasyonunu bitirdikten sonra geri arama gerçekleştirilir. Bu istenen fonksiyon DEĞİLDİR. Geri arama işlemimin sadece eşleşen öğeler tamamlandıktan sonra bir kez yürütüldüğü şekilde zarif bir çözüm arıyorum. Bu soru SO da dahil olmak üzere birkaç noktada ortaya çıktı, ama hiçbir zaman zarif bir cevap olmadı (bu konu için kesin bir cevap bile olmadı - bir kişi için çalışan çözümler başkaları için hiç çalışmaz).

Answer 1

hep solmaya son butona geri arama tetikleyecek @ Ross'un cevap alternatifi (ki ya hareketlendirmek için söylendi son düğmeye olabilir veya olmayabilir) olabilir:

var buttons = $(".buttons"); 
var numbuttons = buttons.length; 
var i = 0; 

buttons.fadeIn('fast', function() { 
    i++; 
    if(i == numbuttons) { 
     //do your callback stuff 
    } 
}); 

Answer 2

var $buttons = $('.buttons'); 

$buttons.each(function (index) { 
    if (index == $buttons.length - 1) { 
     $(this).fadeIn('fast',function() { 
      // my callback 
     }); 
    } else { 
     $(this).fadeIn('fast'); 
    } 
}); 

Test edilmemişse, ancak bu, yalnızca son düğmeyi geri aramalıdır.

Answer 3

Çözümümün arkasındaki fikir bir sayaç tutmaktır. Bir animasyon bittiğinde, bu sayacı artırmanız yeterlidir, böylece son düğmede olduğunuz zamanı görebilirsiniz. Her şey bittiğinde sayacı tekrar sıfıra ayarlamayı unutmayın, çünkü bunu tekrarlamak isteyebilirsiniz (tekrar gizleyin ve tekrar gösterin).

var $buttons=$('.buttons'), 
    button_n=$buttons.length, 
    button_counter=0; 
$buttons.fadeIn('fast', function() { 
    if (button_counter==button_n-1) { 
     alert('It is all done!'); 
     button_counter=0; 
    } else { 
     button_counter++; 
    } 
}); 

Answer 4

onClickBtnEdit = function(){ 
    var $EditDel = $($btnEdit).add($btnDel); 
    var btns = $EditDel.size(); 

    $EditDel.fadeOut("def",function(){     
     btns--; 
     if(btns===0){ 
      $($btnSave).add($btnCancel).fadeIn("slow"); 
     } 
    }); 
}; 

Answer 5

jQuery sürüm 1.6 bir promise tanıttı ve çok daha şık sayaçları ekleme aşıyor.

Örnek:

// Step 1: Make your animation 
$(".buttons").each(function() { 
    $(this).fadeIn("fast"); 
}); 

// Step 2: Attach a promise to be called once animation is complete 
$(".buttons").promise().done(function() { 
    // my callback 
}); 

Answer 6

tek geri arama içine ilgisiz eleman animasyonlar toplamak için bunu yapmak için:

$.when(
    $someElement.animate(...).promise(), 
    $someOtherElement.animate(...).promise() 
).done(function() { 
    console.log("Both animations complete"); 
});