Edit in JSFiddle

$('#btnShow').click(function(){
   $('#SantaClaus').show();
});

$('#btnHide').click(function(){
    $('#SantaClaus').hide();
});

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

$('#SantaClaus').on('show', function(){
    $('#console').html( 'SantaClaus is'  + '<br>');
});

$('#SantaClaus').on('hide', function(){
    $('#console').html('SantaClaus hidden' + '<br>')
});

<button id="btnShow">Show</button>
<button id="btnHide">Hide</button>
<span id="SantaClaus">
     SantaClaus
</span> 
<div id="console">
</div>

#SantaClaus {
    background: red;
    width: 200px;
    text-align: center;
    color: white;
    padding:5px;
    
}