jQuery - show/hide events

Monkeypatch jQuery to dispatch events on show/hide.

by mofle

HTML

<div id="box"></div>
<button id="button">Show box</button>

CSS

#box {
    background: #666;
    width: 100px;
    height: 100px;
    margin: 5px;
}

JavaScript

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


$('#box').click(function() {
    $(this).hide(); 
}).bind('hide', function() {
    console.log('hide event');
}).bind('show', function() {
    console.log('show event');  
});

$('#button').click(function() {
    $('#box').show();
});