How can I override JQuery's .show() and .hide() to trigger events before and after?

callback, jquery, overriding

Solution

plz check the demo fiddle . hope it works

$.show / $.hide - override function:

(function($){
$.override ={'show': $.fn.show, 'hide': $.fn.hide};

$.each($.override,function(M,F){

        var m=M.replace( /^\w/, function(r){ return r.toUpperCase(); });

        $.fn[M] = function(speed, easing, callback) {

            var args=[speed||0,easing||'',callback||function(){}];

            if( $.isFunction(speed)){
                args[2]=speed;
                args[0]=0;
            }                   
            else if( $.isFunction(easing)){
                args[2]=easing;
                args[1]='';
            }                   

            if(!this.selector){
                F.apply(this, arguments);
                return this;
            }

            return this.each(function () {
                var obj = $(this),
                    oldCallback = args[args.length-1],
                    newCallback = function () {
                        if ($.isFunction(oldCallback)){
                            oldCallback.apply(obj);
                        }
                        obj.trigger('after'+m);
                };

                obj.trigger('before'+m);
                args[args.length-1]=newCallback;

                //alert(args);
                F.apply(obj,args);

            });
        }
});
})(jQuery);

usage

jQuery(function($){
var $dataBox=$('#dataBox').bind('beforeHide afterHide beforeShow afterShow', function(e) {
    alert(e.type);
});

$('#toggleButton').bind('click',function(){
    $dataBox[$dataBox.is(':visible')?'hide':'show'](100,'swing',function(){ alert('end of animation');});
    return false;
});
});

Problem

I am tryign to override the JQuery's .show and .hide methods to launch trigger events before and after they are called with the following code. ``` $(document).ready(function () { $('#dataBox').bind('afterShow', function () { alert('afterShow'); }); $('#dataBox').bind('afterHide', function () { alert('afterHide'); }); $('#dataBox').bind('beforeShow', function () { alert('beforeShow'); }); $('#dataBox').bind('beforeHide', function () { alert('beforeHide'); }); $('#toggleButton').click(function(){ if($('#dataBox').is(':visible')) { $('#dataBox').hide (); } else { $('#dataBox').show(); } }); }); jQuery(function ($) { var _oldShow = $.fn.show; //Override jquery's 'show()' method to include two triggered events before and after $.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(function ($) { var _oldHide = $.fn.hide; //Override jquery's 'hide()' method to include two triggered events before and after $.fn.hide = function (speed, oldCallback) { return $(this).each(function () { var obj = $(this), newCallback = function () { if ($.isFunction(oldCallback)) { oldCallback.apply(obj); } obj.trigger('afterHide'); }; obj.trigger('beforeHide'); _oldHide.apply(obj, [speed, newCallback]); }); } }); ``` I have the following Markup: ``` <input type='text' id='dataBox'/> <input type='button' value='toggle' id='toggleButton' /> ``` When I click the toggle button the 'beforeHide' and 'beforeShow' events are triggering while the 'afterShow' and 'afterHide' aren't. Can anyone clue me in as to what I am doing wrong?

Original source