jQuery add/removeClass with transition and callback.

jquery.classes-transition.js

(function(global, $, undefined) {
    'use strict';

    var doc = global.document;

    // まずイベント名を確定させる
    var TRANSITION_END = (function() {
        var events = {
            'transition':       'transitionend',
            'WebkitTransition': 'webkitTransitionEnd'
        };

        var evName, prop;
        for (prop in events) {
            if (typeof(doc.body.style[prop]) !== undefined) {
                evName = events[prop];
                break;
            }
        }

        return evName;
    }());

    // そして拡張
    $.extend($.fn, {
        /**
         * addClassして、そのtransitionEndでコールバック
         *
         * @param {String} className
         *     addClassするクラス名
         * @param {Function} callback
         *     transitionEndで発火したいコールバック
         */
        addClassWithTransitionCallback: function(className, callback) {
            if (!className) { return this; }

            if (!callback || !$.isFunction(callback)) {
                return this.addClass(className);
            }

            return this
                .one(TRANSITION_END, function(ev) {
                    callback.call(this, ev);
                })
                .addClass(className);
        },

        /**
         * removeClassして、そのtransitionEndでコールバック
         *
         * @param {String} className
         *     removeClassするクラス名
         * @param {Function} callback
         *     transitionEndで発火したいコールバック
         */
        removeClassWithTransitionCallback: function(className, callback) {
            if (!className) { return this; }

            if (!callback || !$.isFunction(callback)) {
                return this.removeClass(className);
            }

            return this
                .one(TRANSITION_END, function(ev) {
                    callback.call(this, ev);
                })
                .removeClass(className);
        }
    });

}(window, jQuery));