Introduction
jQuery AnimationEnd Plugin - Provides a callback when a CSS3 animation is complete on an element

jQuery AnimationEnd Plugin - Provides a callback when a CSS3 animation is complete on an element

There will be some instances where in we have to do something after a CSS3 animation is complete on a particular element. This plugin will come in handy on those cases.

Plugin attaches to the animationEnd and transitionEnd events, fired when an animation is complete and provides a callback.

Javascript

$.fn.animationEnd = function(callback) {
        return this.each(function(){
          var $this = $(this);
              $this.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd transitionend webkitTransitionEAnind oTransitionEnd MSTransitionEnd", function() {
                if (typeof callback == 'function') {
                    callback.call(this); // brings the scope to the callback
                };
            });
        })
        
    };

In the demo, I have a case where we want to remove the class which provides the css3 styles, at the animation end so that we can add the class again to trigger the animation.

Demo

Suggestions are welcome to improve this plugin.Please, point out mistakes as well.

Author

Vetrichelvan Jeyapalpandy

12 years of experience in web development. Javascript enthusiast. Performance is an important trait of any website, so trying to improve that wherever possible.

View Comments
Next Post

Brain Effing Javascript

Previous Post

Twitter feed on Python using YQL and BeautifulSoup