我的解决方案:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

使用示例:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

<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';
                    }">

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

你总是可以添加到原始的.show()方法中，这样你就不必每次显示一些东西时都触发事件，或者如果你需要它与遗留代码一起工作:

Jquery扩展:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

使用的例子:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

这可以有效地让您在执行原始.show()方法的正常行为的同时执行beforeShow和afterShow操作。

您还可以创建另一个方法，这样就不必重写原来的.show()方法。

你可以使用jQuery的Live Query插件。 并编写如下代码:

$('#contentDiv:visible').livequery(function() {
    alert("do something");
});

然后每当contentDiv可见时，“do something”就会被提醒!

我根据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);
},

我希望得到帮助

$(函数(){ 美元(文档)。点击(函数(){ if ($('#contentDiv').is(':visible')) { 警报(“可见的”); }其他{ 警报(“隐藏”); ｝ })； })； < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> <div id="contentDiv">Test I'm here</div> <按钮onclick = " $ (' # contentDiv ') .toggle ();>切换div</按钮> . quot