¿Es posible escuchar un evento de "cambio de estilo"?

¿Es posible crear un detector de eventos en jQuery que pueda vincularse a cualquier cambio de estilo? Por ejemplo, si quiero "hacer" algo cuando un elemento cambia de dimensión, o cualquier otro cambio en el atributo de estilo que podría hacer:

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

Sería realmente útil

¿Algunas ideas?

ACTUALIZAR

Perdón por responder esto yo mismo, pero escribí una solución ordenada que podría adaptarse a otra persona:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

Esto anulará temporalmente el método interno prototype.css y lo redefinirá con un disparador al final. Entonces funciona así:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

Dado que jQuery es de código abierto, supongo que podría ajustar la cssfunción para llamar a una función de su elección cada vez que se invoca (pasando el objeto jQuery). Por supuesto, querrá explorar el código jQuery para asegurarse de que no haya nada más que use internamente para establecer las propiedades CSS. Idealmente, desearía escribir un complemento separado para jQuery para que no interfiera con la biblioteca jQuery, pero tendrá que decidir si eso es factible o no para su proyecto.

Las cosas han avanzado un poco desde que se hizo la pregunta: ahora es posible usar un MutationObserver para detectar cambios en el atributo 'style' de un elemento, no se requiere jQuery:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

El argumento que se pasa a la función de devolución de llamada es un objeto MutationRecord que le permite obtener los valores de estilo antiguos y nuevos.

El soporte es bueno en los navegadores modernos, incluido IE 11+.

La declaración de su objeto de evento debe estar dentro de su nueva función css. De lo contrario, el evento solo se puede disparar una vez.

(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var ev = new $.Event('style');
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

Creo que la mejor respuesta es de Mike en el caso de que no pueda iniciar su evento porque no es de su código. Pero recibo algunos errores cuando lo uso. Entonces escribo una nueva respuesta para mostrarle el código que uso.

Extensión

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

Uso

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

Obtuve un error porque var ev = new $ .Event ('style'); Algo parecido al estilo no se definió en HtmlDiv. Lo eliminé y ahora ejecuto $ (this) .trigger ("stylechanged"). Otro problema fue que Mike no devolvió el resultado de $ (css, ..), entonces puede causar problemas en algunos casos. Entonces obtengo el resultado y lo devuelvo. Ahora funciona ^^ En cada cambio de CSS incluye algunas bibliotecas que no puedo modificar y desencadenar un evento.

Como otros han sugerido, si tiene control sobre cualquier código que esté cambiando el estilo del elemento, puede activar un evento personalizado cuando cambie la altura del elemento:

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

De lo contrario, aunque requiere muchos recursos, puede configurar un temporizador para verificar periódicamente los cambios en la altura del elemento ...

No hay soporte incorporado para el evento de cambio de estilo en jQuery o en el script java. Pero jQuery admite crear eventos personalizados y escucharlos, pero cada vez que hay un cambio, debe tener una forma de activarlo usted mismo. Por lo tanto, no será una solución completa.

puede probar el complemento Jquery, desencadena eventos cuando css cambia y es fácil de usar

http://meetselva.github.io/#gist-section-attrchangeExtension

 $([selector]).attrchange({
  trackValues: true, 
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

Interesante pregunta. El problema es que height () no acepta una devolución de llamada, por lo que no podrá activar una devolución de llamada. Use animate () o css () para establecer la altura y luego active el evento personalizado en la devolución de llamada. Aquí hay un ejemplo usando animate (), probado y funciona ( demo ), como prueba de concepto:

$('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
}); 

Simplemente agregando y formalizando la solución de @David desde arriba:

Tenga en cuenta que las funciones jQuery son encadenables y devuelven 'esto' para que se puedan invocar varias invocaciones una tras otra (por ejemplo $container.css("overflow", "hidden").css("outline", 0);).

Entonces el código mejorado debería ser:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        var ret = orig.apply(this, arguments);
        $(this).trigger(ev);
        return ret; // must include this
    }
})();

¿Qué tal jQuery cssHooks?

Tal vez no entiendo la pregunta, pero lo que está buscando se hace fácilmente cssHooks, sin cambiarcss() función.

copia de la documentación:

(function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery ); 

https://api.jquery.com/jQuery.cssHooks/

Tuve el mismo problema, así que escribí esto. Funciona bastante bien. Se ve muy bien si lo mezclas con algunas transiciones CSS.

function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}