改变CSS后调用javascript函数

Question

我想在css更改后调用一个函数。例如像这样的

$("#ContentDiv").css('height','500px').change(function(){
    alert('changed');   
});

在上述css更改后立即调用函数。我不能使用setTimeout或其他超时。实际上我已经应用了一些css动画1秒，导致contentdiv调整大小1秒，这就是为什么如果我立即调用函数

$("#ContentDiv").css('height','500px');
myfunction();

myfunction（）将在高度仍未改变的情况下开始执行。

感谢John Smith纠正我的问题，他建议好，但我找不到接受他的改变。

Answer 1

在某些浏览器上会触发DOMAttrModified事件，您可以捕获这些事件来检测它。您可以在IE上使用PropertyChanged，但DOMAttrModified应该适用于Chrome / Firefox等。

这样的事情：

document.documentElement.addEventListener('DOMAttrModified', function(evt){
  if (evt.attrName === 'class') {
          // Code 
  }
}, false);

编辑：根据您的更新，如果您只想在动画完成后调用代码，并且您正在使用jQuery来执行动画，则可以将回调函数链接到动画，请参阅文档：{ {3}}

Answer 2

只需调用该函数。

$("#ContentDiv").css('height','500px');
myFunction();