jquery on show hide event

gistfile1.js

(function($) {
	$.each(['show', 'hide'], function(i, ev) {
		var el = $.fn[ev];
		$.fn[ev] = function() {
			this.trigger(ev);
			return el.apply(this, arguments);
		};
	});
})(jQuery);

//
$('#foo').on('show', function() {
    console.log('#foo is now visible');
});

$('#foo').on('hide', function() {
    console.log('#foo is hidden');
});
$('#foo').show().hide();


// http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

this does not support easing and other arguments

This code can break tabs, accorditions scripts of most of plugins

This support easing and trigger event after animation done!

(function ($) {
        $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
            var el = $.fn[ev];
            $.fn[ev] = function () {
                var result = el.apply(this, arguments);
                result.promise().done(function () {
                    this.trigger(ev, [result]);
                })
                return result;
            };
        });
    })(jQuery);

if I do something like

<div id="test">
  <div id="inner"></div>
</div>

and in code

$("#test").on("show", function(e) {
  console.log(e.target); //here I get #inner.. but I expect only #test
})

$("#inner").show();

how to fix it?

Oh.. found

change trigger to triggerHandler for stop bubbling

DantaliaN00, thanks, helped

thanks, I had the same issue.. fixed it for me too.. so it will be

(function ($) {
        $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
            var el = $.fn[ev];
            $.fn[ev] = function () {
                var result = el.apply(this, arguments);
                result.promise().done(function () {
                    this.triggerHandler(ev, [result]);
                })
                return result;
            };
        });
    })(jQuery);