CSS3 transition event Listener with jQuery

Question

I am implementing a CSS3 transition effect on a article element but the event listener transitionend works only in pure JavaScript, not with jQuery.

See example below:

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

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

Can somebody explain me what am I doing wrong?

Answer 1

Also take note that if you are running multiple transitions on an element (eg. opacity and width) that you'll get multiple transitionEnd callbacks.

If you're using jQuery to bind an event to a div's transition end, you might want to consider using one() function.

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

This means that the code will only fire the first time. So, if you had four different transitions happening on the same element, your callback will only fire once.