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?
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.
one() makes sure that you only capture one event.
transitionend will fire to the parent for any animations of its children too.in jQuery you should use bind() or on() method:
$(this).parent().bind( 'transitionend', function() {alert("1"); });
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");
})
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");
});
