Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 transition event Listener with jQuery

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?

like image 696
Tudor Ravoiu Avatar asked Jul 01 '12 17:07

Tudor Ravoiu


1 Answers

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.

like image 120
graygilmore Avatar answered Oct 11 '22 09:10

graygilmore