jQuery के साथ CSS3 संक्रमण घटना श्रोता

Question

मैं एक लेख तत्व पर CSS3 संक्रमण प्रभाव लागू कर रहा हूं लेकिन ईवेंट श्रोता ट्रांजिशनेंड केवल शुद्ध जावास्क्रिप्ट में काम करता है, jQuery के साथ नहीं।

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

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

किसी ने मुझसे व्याख्या कर सकते हैं क्या मैं गलत कर रहा हूँ:

नीचे दिए गए उदाहरण देखते हैं?

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

Answer 1

jQuery में आप bind() या on() विधि का उपयोग करना चाहिए

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

Answer 2

पहले एक वास्तव में (मैं इसे शक है क्योंकि यह एक विक्रेता उपसर्ग की आवश्यकता होती है चाहिए) काम करता है, तो यह भी काम करना चाहिए:

Answer 3

this.parentNode एक जावास्क्रिप्ट ऑब्जेक्ट देता है। इसकी संपत्ति .addEventListener $(this).parent() एक jQuery ऑब्जेक्ट देता है। यह एक संपत्ति .addEventListener

नहीं है बजाय इस कोशिश करें,

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

Answer 4

भी ध्यान दें कि आप एक तत्व पर कई बदलाव चला रहे हैं (उदाहरण के लिए। अस्पष्टता और चौड़ाई) है कि आप एकाधिक transitionEnd कॉलबैक मिलेगा ।

यदि आप एक डीवी के संक्रमण अंत में किसी ईवेंट को बाध्य करने के लिए jQuery का उपयोग कर रहे हैं, तो आप एक() फ़ंक्शन का उपयोग करने पर विचार करना चाहेंगे।

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

इसका मतलब है कि कोड केवल पहली बार आग लग जाएगा। इसलिए, यदि आपके पास एक ही तत्व पर चार अलग-अलग संक्रमण होते हैं, तो आपका कॉलबैक केवल एक बार आग लग जाएगा।