我根据Glenns的想法改变了Catalint的隐藏/显示事件触发器。 我的问题是我有一个模块化的应用程序。我改变模块之间显示和隐藏div父母。然后，当我隐藏一个模块并显示另一个模块时，用他的方法，当我在模块之间更改时，我有一个可见的延迟。我只需要偶尔听一听这件事，而且是在一些特殊的孩子身上。所以我决定用displayObserver类只通知子对象

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

然后，当一个孩子想要监听“show”或“hide”事件时，我必须给他添加类“displayObserver”，当它不想继续监听它时，我将他删除类

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

我希望得到帮助

有一种方法。 只适用于由css类更改引起的可见性更改，但也可以扩展到观察属性更改。

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

<div id="welcometo">Özhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

此代码自动控制不需要查询可见或不可见的控制

这支持动画完成后的缓和和触发事件![jQuery 2.2.4测试]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

灵感来自http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

DOM突变观察者正在解决这个问题。它们允许你将观察者(一个函数)绑定到改变dom元素的内容、文本或属性的事件上。

随着IE11的发布，所有主流浏览器都支持此功能，请访问http://caniuse.com/mutationobserver

示例代码如下:

$（函数（） { $（'#show'）.click（function（） { $（'#testdiv'）.show（）; }); var observer = new MutationObserver （function（mutations） { 警报（“属性已更改！ }); var target = document.querySelector（'#testdiv'）; observer.observe（target， { 属性：真 }); }); <div id=“testdiv” style=“display：none;”>hidden</div> <按钮 id=“显示”>显示隐藏的 div</button> <script type=“text/javascript” src=“https://code.jquery.com/jquery-1.9.1.min.js”></script>

在这里帮助我的是最近的ResizeObserver规格polyfill:

const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

注意，它是跨浏览器和性能的(没有轮询)。