Before and After jQuery Show Events

This is to show an idea of hijacking the jQuery show function to trigger before and after events.

by mrivasa

HTML

<input id="show-button" type='button' value='Click to hide span'/>
<div id="hidden-div">Here I am!</div>

JavaScript

(function ($) {
    var _oldShow = $.fn.hide;

    $.fn.hide = function (/*speed, easing, callback*/) {
        var argsArray = Array.prototype.slice.call(arguments),
            duration = argsArray[0],
            easing,
            callback,
            callbackArgIndex;

        // jQuery recursively calls show sometimes; we shouldn't
        //  handle such situations. Pass it to original show method.
        if (!this.selector) {
            _oldShow.apply(this, argsArray);
            return this;
        }

        if (argsArray.length === 2) {
            if ($.isFunction(argsArray[1])) {
                callback = argsArray[1];
                callbackArgIndex = 1;
            } else {
                easing = argsArray[1];
            }
        } else if (argsArray.length === 3) {
            easing = argsArray[1];
            callback = argsArray[2];
            callbackArgIndex = 2;
        }

        return $(this).each(function () {
            var obj = $(this),
                oldCallback = callback,
                newCallback = function () {
                    if ($.isFunction(oldCallback)) {
                        oldCallback.apply(obj);
                    }

                    obj.trigger('afterHide');
                };

            if (callback) {
                argsArray[callbackArgIndex] = newCallback;
            } else {
                argsArray.push(newCallback);
            }

            obj.trigger('beforeHide');

            _oldShow.apply(obj, argsArray);
        });
    };
})(jQuery);

$('#hidden-div')
    .bind('beforeHide', function () {
        alert('before hide');
    })
    .bind('afterHide', function () {
        alert('after hide');
    });

$('#show-button').click(function () {
    //$('#hidden-div').show('fast', function () {
    //    alert('in callback');
    //});
    $('#hidden-div').hide();
});