jQuery, birden çok animasyondan sonra yalnızca bir kez geri arama çağıran

Aynı anda birkaç animasyonun çalıştığını ve bunların tamamlanmasının ardından bir işlevi çağırmak istediğimi varsayalım.jQuery, birden çok animasyondan sonra yalnızca bir kez geri arama çağıran

Sadece bir animasyonla, kolay; Bunun için bir geri çekilme var. Örneğin: Benim seçici çeşitli öğeleri bulursa

$(".myclass").fadeOut(slow,mycallback);

Sorun şu ki, geri arama bunların her biri için çağrılır.

Bir geçici çözüm çok zor değil; örneğin:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var $mc=$(".myclass"),l=$mc.length; 
     $mc.fadeOut("slow",function(){ 
     if (! --l) $("#target").append("<p>All done.</p>"); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    </style> 
</head> 
<body> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <div id="target"></div> 
</body> 
</html>

Sorum şu: Bunu yapmanın daha iyi bir yolu var mı?

kaynak

2010-03-12 David V.

Çoğu durumda, bir sayaç yerine bir boole kullanıyorum (bu nedenle eylem ilk animasyonun sonunda gerçekleştirilir), ancak aksi durumda aynı yöntemdir. Güzel soru, başka yollardan merak ediyorum. –

Gerçekten. Örneğin, tüm animasyonlarınız aynı uzunlukta değilse (basit örneğimde olduğu gibi) ve yalnızca bir şeyler hareket ettikten sonra veya tarayıcınızda solmadan sonra bir şeyler yapmak istiyorsanız hepsini beklemek istersiniz. –

Sen hepsi için aynı geri arama çalıştırmak, ancak hiçbiri şu anda artık animasyonlu ediliyor keşke böyle, if maddesini yürütebilirsiniz:

herhangi hala aracılığıyla hayata dönüyor, bu sadece denetler

$(".myclass").fadeOut("slow", function() { 
    if ($(".myclass:animated").length === 0) 
     $("#target").append("<p>All done.</p>"); 
    });

:animated selector. Eğer daha sonra aynı kavramı kullanmak çok farklı şeyler animasyon olsaydı , sadece bu gibi seçicinin ekleyin:

$(".myclass:animated, .myClass2:animated")

sen yerlerde bir sürü onu kullanıyorsanız, bunu bir onFinish işlevi geri arama yapmak istiyorum ya da toparlamak için bir şey. Benim durumumda

kaynak

2010-03-12 12:18:04

Güzel, Bunun açıklayıcı yönünü beğeniyorum. –

Bunu da beğeniyorum, +1 –

Bu soruna da girdim. Akıllı çözüm. –

bu parçacığı üzerinde tartışma at

if ($(".myclass:animated").length === 1)

kaynak

2010-08-04 12:42:46

bak tanımlamak zorunda: jQuery $.animate() multiple elements but only fire callback once

.when()/.then() ve .promise().done(callback()); fonksiyonları tek arayarak sorununa çok daha zarif bir çözüm sağlamak Tüm animasyonların sonunda calllback.

kaynak

2012-02-19 18:04:38 Scrat

+12

Doğru cevap bu olmalı. –

İyi çağrı. Benzer şekilde, bu son öğenin işlenmesinden sonra bir geri çağırma işlemini başlatmak için sıra kullanır: elements.fadeOut (330) .last(). Queue (function() {}); – Tyler

jQuery, birden çok animasyondan sonra yalnızca bir kez geri arama çağıran

cevap

İlgili konular