Determinando alterações na altura DIV ou atributos CSS

Ao trabalhar com páginas da web, muitas vezes é necessário rastrear alterações na altura ou outro CSS atributos dos elementos. jQuery fornece várias opções para atender a essa necessidade.

Acompanhamento de eventos com 'change()':

Enquanto o evento 'change()' é usado principalmente para elementos de entrada , ele pode ser personalizado para detectar alterações de CSS. No entanto, esta abordagem envolve verificar periodicamente as propriedades CSS do elemento e disparar um evento se elas diferirem dos valores anteriores:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Custom Event Binding com 'bind()':

Uma solução mais eficiente envolve criar um evento personalizado e vinculá-lo ao elemento desejado:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


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

Nesse caso, acionamos o evento 'heightChange' sempre que a altura da div 'mainContent' for alterada.

Nota:

• A frequência das verificações na função 'checkForChanges()' pode ser ajustada para atender a requisitos específicos.
• Os métodos 'bind()' e 'trigger()' estão bem documentados na documentação do jQuery para referência futura.