Before and After jQuery Show Events

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

HTML

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

CSS

div { display: none }

JavaScript

jQuery.fn.extend({

    show2:function( speed, easing, callback ) {
        this.trigger('beforeShow');
        this.show(speed, easing, function(){
            $(this).trigger('afterShow');
            if ($.isFunction(callback)) {
                callback.apply(this);
            }
        });
        if(!speed){
            this.trigger('afterShow');            
        }            
    }


});


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

$('input').click(function () {
    $('div').show2();
});