Önceki (bilinmeyen) animasyon/efekt bittikten sonra jQuery'de kod nasıl çalıştırılır?

Önceki efektler/hareketler tamamlandıktan sonra DIV öğesini gizlemek istiyorum. Sıralamayı bilseydim, .animate() 'a verdiğim geri arama işlevine kod ekleyebilirim (örneğin). Ancak bu durumda, bu duruma erişemiyorum (bir animasyondan/efektten geçiyor olabilir de olmayabilir). Bu yüzden iki animasyon/efekt iki farklı olay tarafından tetiklenir (örneğin tuşa basma).

Bu yüzden DIV öğesi mevcut animasyonu/efektini bitirdikten sonra fadeOut'u çalıştırırdım. Bu jQuery ile mümkün mü?

Teşekkürler.

DÜZENLEME: Böylece hedef, önceki animasyon kodundan mevcut eylemi (örneğin fadeOut ()) kodunu ayırmaktır.

EDIT2: Soruyu daha açık hale getirdi.

0
Neden diziye erişiminiz yok? Ayrıca, jQuery ve bir CSS3 animasyonu söylemez?
katma yazar Joey, kaynak
@JoeyVanOmmen biliyorum jQuery çünkü yazdım çünkü :). Bir şey, önceki animasyonun diğerine göre farklı bir olaydan tetiklenmesidir (örneğin iki ayrı buton tıklaması).
katma yazar Lycha, kaynak

5 cevap

Sadece .fadeOut() 'u çağırın ve otomatik olarak fx kuyruğunun sonuna eklenecektir:

http://jsfiddle.net/gilly3/f4vNH/

2
katma
Teşekkürler, jQuery'nin bunu yapabileceğini bilmiyordum, bunu çözüyor. Fx kuyrukları hakkında daha fazla okumalıyım.
katma yazar Lycha, kaynak
Ve ek olarak, fadeOut'tan sonra ek kodu çalıştırmak için .fadeOut() işlevini geri verebilirim.
katma yazar Lycha, kaynak

Özel bir etkinlik oluşturma ve ona canlı() ile bağlama hakkında ne dersiniz?

<script>
$("p").live("myCustomEvent", function(e, myName, myValue) {
  $('#div').hide();

});
$("button").click(function() {
  $("p").trigger("myCustomEvent");
});
</script>
0
katma

Özel tavsiye almak için bize önceki animasyon kodunu göstermeniz gerekir. JQuery'de, animasyon efektleri birlikte zincirlenebilir ve jQuery otomatik olarak birbiri ardına sıraya girer. Veya, bir sonraki işlemin başlangıcını tetiklemek için bir işlemin tamamlanma işlevini kullanabilirsiniz.

Örnekler:

$("#item").fadeIn(1000).delay(1000).fadeOut(500);
$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000).delay(1000).fadeOut(500);

.animate() yönteminde, animasyon tamamlandığında herhangi bir işlemi tetiklemek için kullanabileceğiniz bir tamamlama işlevi vardır, ancak sonraki işlem bir animasyonun kendisi ise, otomatik zincirlemeyi yalnızca tamamlama işlevi yerine yukarıda:

$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000, function() {alert("Animation finished."});
0
katma

Animate çağrısında tam işlev parametresini aradığınızı düşünüyorum:

http://api.jquery.com/animate/

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   //Animation complete.
  });
});
0
katma

Bu basit, sadece animasyonunuzu sıraya koyun

$("#myDiv").queue(function(){
    $(this).fadeOut();
});

Animasyon kuyruğu tamamlandıktan sonra yürütülür. Böylece, animasyon kuyruğundan sonra ve fadeOut'unuzdan önce kod ekleyebilir ve ne yaparsanız yapın ...

0
katma