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

in jQuery you should use bind() or on() method:

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

Answer 2

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.

Answer 3

this.parentNode returns a javascript object. It has a property .addEventListener $(this).parent()returns a jQuery object. It does not have a property .addEventListener

Try this instead,

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

Answer 4

If the first one really works (I doubt it because it should require a vendor prefix), then this should work too:

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