CSS3 geçiş olayı jQuery ile Dinleyici

Question

Bir makale öğesinde bir CSS3 geçiş efekti uygularım ancak olay dinleyicisi geçişi yalnızca jQuery ile değil, salt JavaScript'te çalışır.

// this works 
this.parentNode.addEventListener('transitionend', function() {alert("1"); }, true); 

// this does not work 
$(this).parent().addEventListener('transitionend', function() {alert("1"); }, true); 

birileri yanlış yapıyorum bana ne açıklayabilir:

Aşağıdaki örneğe bakın? İlki gerçekten (bir satıcı öneki gerektirir gerekir çünkü Sanmam) çalışırsa

$(this).parent().bind('transitionend', function() {alert("1"); }); 

Answer 1

Eğer bind() veya on() yöntem kullanmalıdır

$(this).parent().on('transitionend', function() { 
    alert("1"); 
}); 

Answer 2

, o zaman bu çok çalışması gerekir:

jQuery

Answer 3

this.parentNode, javascript nesnesini döndürür. Bir jQuery nesnesi .addEventListener $(this).parent() döndürür. Bu

$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() { 
    alert("1"); 
}) 

Answer 4

Ayrıca not almak yerine bu deneyin bir özellik .addEventListener

yok Birden transitionEnd geri aramalar alırsınız Eğer bir öğe üzerinde birden geçişleri çalıştırıyorsanız (mesela. Donukluk ve genişlik) .

Bir konunun bir div geçişine sonlandırmak için jQuery kullanıyorsanız, one() işlevini kullanmayı düşünebilirsiniz.

$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() { 
    // your code when the transition has finished 
}); 

Bu, kodun yalnızca ilk kez tetikleneceği anlamına gelir. Yani, aynı element üzerinde dört farklı geçişiniz olsaydı, geriçağırımınız sadece bir kez ateşlenir.