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 Joel Ferreira

HTML

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

CSS

div { display: none }

JavaScript

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

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

                    obj.trigger('afterShow');
                };

            obj.trigger('beforeShow');

            _oldShow.apply(obj, [speed, newCallback]);
        });
    };
})(jQuery);

$('#takeacity')
    .bind('beforeShow', function () {
        alert('before show');            
    })
    .bind('afterShow', function () {
        alert('after show');            
    });

$('input').click(function () {
    $('#takeacity').show();
});