CSS 属性の変更を追跡するカスタム イベントを作成するにはどうすればよいですか?

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
  if ($element.css('height') != lastHeight) {
    // CSS height changed
    lastHeight = $element.css('height');
  }
  setTimeout(checkForChanges, 500);
}
checkForChanges();</code>

<code class="javascript">$('#mainContent').bind('heightChange', function() {
  // CSS height changed
});

$("#btnSample1").click(function() {
  $("#mainContent").css('height', '400px');
  $("#mainContent").trigger('heightChange');
});</code>