javascript - 当某些 dom 元素改变高度时的 jQuery 事件

Question

当某些(任何一个)元素改变其自高度度时，有什么方法可以设置 jQuery 事件吗？

我真的不知道怎么才能开火

喜欢:

$('body *').onHeightChange(function(){

//do somenthing
});

Answer 1

每当你做一些改变元素高度的事情时，触发一个事件。

$("#somelement").slideDown().trigger("heightchange");

现在你可以绑定(bind)到那个:

$("body").on("heightchange",function(e){
    var $el = $(e.target); // the element that has a new height.
});

您甚至可以对许多可以更改高度的 jQuery 方法进行 monkeypatch，并让它们在使用该方法之前和之后测试高度并相应地触发事件。下面是一个未经测试的例子

var topatch = ["slideup","slidedown","height","width","attr","css","animate"];
$.each(topatch,function(i,method){
    var oldfn = $.fn[method];
    $.fn[method] = function(){
        return this.each(function(){
            var $this = $(this), currHeight = $this.css("height"),
                result = oldfn.apply($this,arguments); 
            // check for promise object to deal with animations
            if ( $.isFunction(result.promise) ) {
                result.promise().done(function(){
                    if ( currHeight != $this.css("height") ) {
                        $this.trigger("heightchange");
                    }
                });
                return;
            }
            if ( currHeight != $this.css("height") ) {
                $this.trigger("heightchange");
            }            
        });
    };
});​