CODEWITHSUNDEEP
javascriptjquerycsscross-browser
Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47933

Does jQuery have, or is there a jQuery plugin, with a built-in function for listening to CSS3 animation events (e.g. animationEnd)?

I looked around and couldn't find any. In my app in order to trigger an animation on an element, I add a class with that desired animation to the element. Then I want to listen to the animation end event and run some code when it is fired.

As far as I can tell jQuery does not have this feature implemented already in a cross-browser way already (e.g. $(document).on('animationEnd', 'selector', callback)).

While it is easy to implement this manually, I was wondering if there's a third-party library available that does this already?

Upvotes: 1

Views: 83

Answers (2)

Shawn Wernig
Shawn Wernig

Reputation: 1742

Try:

transitionend
webkitTransitionEnd
oTransitionEnd
MSTransitionEnd

You can use something like:

$('#yourelement').addClass('animatedClass').on('transitionend', function(e) {
 // ... do stuff.
);

There is also

 :animated

which you can test against,

 if ( $('#yourelement:not(:animated)') ) { ...
 if ( $('#yourelement').is(':animated') ) { ...

Hope that sets you on the right path =)

Upvotes: 2

Inkbug
Inkbug

Reputation: 1692

Listen to all of the prefixed events also.

Upvotes: -1

Related Questions