On Animation End Function: Detect CSS Animation End

// Detect CSS Animation Complete // @param el - element to watch for animation complete // @param callback - call back to run when animation is complete // @param context - context to be passed back to the callback function // @param targetEl - element to pass to the callback (default // is to pass el) function onAnimationEnd(el, callback, context, targetEl){ var animationEnd = null; // Different browsers support different animation end events, though // they all support one version or another. // These are animation name properties supported by browsers, and their // corresponding animation end events. If a browser supports the // animation name (the key), it will support the animation end event // (the value). var animations = { 'animationname' : 'animationend', 'OAnimationName' : 'oanimationend', 'MSAnimationName' : 'MSAnimationEnd', 'MozAnimationName' : 'animationend', 'WebkitAnimationName' : 'webkitAnimationEnd' }; // Resolve element passed back to callback var returnEl = typeof targetEl !== 'undefined' ? targetEl : el; for (var a in animations) { if( el.css(a) ){ animationEnd = animations[a]; break; } } // If there is an animation end event known to the browser if (animationEnd) { // Listen for it and fire the callback when it happens el.on(animationEnd, function(e) { // Only listen for animations on this element (not its children) if ( e.target !== this ){ return; } // Run callback with element, passing context back callback(returnEl, context); // Remove this listener now that it has run callback el.off(animationEnd); }); } // If no CSS animation is known to the browser, run the callback now else { // Run callback with element, passing context back callback(returnEl, context); } }