Detecção de evento quando a propriedade css é alterada usando Jquery

Existe uma maneira de detectar se a propriedade css "display" de um elemento é alterada (para nenhum ou bloco ou bloco embutido ...)? se não, algum plugin? obrigado

Nota

Os eventos de mutação foram descontinuados desde que esta postagem foi escrita e podem não ser suportados por todos os navegadores. Em vez disso, use um observador de mutação .

Sim você pode. O módulo DOM L2 Events define eventos de mutação ; um deles - DOMAttrModified é o que você precisa. Concedido, eles não são amplamente implementados, mas são suportados pelo menos nos navegadores Gecko e Opera.

Experimente algo neste sentido:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Você também pode tentar utilizar o evento "propertychange" do IE como um substituto para DOMAttrModified. Deve permitir detectar stylemudanças de forma confiável.

Você pode usar o plugin Attrchange jQuery . A principal função do plugin é vincular uma função de ouvinte na mudança de atributo dos elementos HTML.

Amostra de código:

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "display") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/inline/i) == -1) {

                // your code to execute goes here...
            }
        }
    }
});

Você pode usar a cssfunção jQuery para testar as propriedades CSS, por exemplo. if ($('node').css('display') == 'block').

Colin está certo, que não há nenhum evento explícito que seja disparado quando uma propriedade CSS específica é alterada. Mas você pode ser capaz de inverter e disparar um evento que define a exibição e tudo mais.

Considere também o uso de classes CSS para obter o comportamento desejado. Freqüentemente, você pode adicionar uma classe a um elemento que o contém e usar CSS para afetar todos os elementos. Costumo colocar uma classe no elemento body para indicar que uma resposta AJAX está pendente. Então, posso usar seletores CSS para obter a exibição que desejo.

Não tenho certeza se é isso que você está procurando.

Para propriedades para as quais a transição css afetará, pode usar o evento transactionend, por exemplo, para z-index:

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

Você não pode. CSS não suporta "eventos". Atrevo-me a perguntar para que você precisa? Confira esse post aqui no SO. Não consigo pensar em uma razão pela qual você gostaria de conectar um evento a uma mudança de estilo. Estou assumindo aqui que a mudança de estilo é desencadeada em algum outro lugar por um pedaço de javascript. Por que não adicionar lógica extra lá?