Catch jQuery style events

No MutationObserver is used!

HTML

<div id="element">I am a div</div>
<div id="styles"></div>

CSS

#element, #styles{
  border: 2px solid darkgray;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  margin: 10px;
  padding: 5px;
}
#styles{
  text-align: left;
}

JavaScript

/** 
 * EXTEND JQUERY FUNCTIONS:
 * ========================
 * - css(),
 * - show() and
 * - hide()
 */
(function() {
    var ev = new $.Event('event.css.jquery'),
        show = $.fn.show;
    $.fn.show = function() {
        show.apply(this, arguments);
        $(this).trigger(ev);
    };
})();

///////////////DISPLAY RESULTS//////////////////////
var style = ($(this).attr('style'))? '"' + $(this).attr('style') + '"' : '""';
$('<p>').
	appendTo('#styles').
  html( "Original inline style: " +  style);

////////////CATCH JQUERY STYLE EVENTS///////////////
$('#element').on('event.css.jquery', function(e) {
    $('<p>').
    	appendTo('#styles').
    	html( "New inline style: \"" + $(this).attr('style') + "\"" );
});

///////////////CALL JQUERY FUNCTIONS////////////////
$('#element').css("display","none");
$('#element').show();
$('#element').show();
$('#element').hide();