元素变得可见时的jQuery

Question

基本上,我想知道是否有一种方法可以在元素隐藏或可见时自动运行函数,而不是在用户单击时自动运行,而是在另一个脚本中自动运行.

我不希望这只运行一次,因为元素(如滑块)不断从可见变为隐藏.

这是jQuery可以用bind做的吗？比如将元素的可见性绑定到一个函数(我不知道如何写这个)

如果您需要我详细说明我正在尝试做什么,请告诉我.谢谢

伪代码:

$('#element').bind('display:none', function);
function(){
    //do something when element is display:none
}

$('#element').bind('display:block', function2);
function2(){
    //do opposite of function
}

Answer 1

JQuery中没有事件可以检测css更改.
请参阅此处:jQuery中的onHide()类型事件
有可能:

DOM L2 Events模块定义了突变事件; 其中之一 - DOMAttrModified是您需要的.当然,这些并没有得到广泛实施,但至少在Gecko和Opera浏览器中得到了支持.
Source:使用Jquery更改css属性时的事件检测

没有事件,您可以使用setInterval函数,如下所示:

var maxTime = 5000, // 5 seconds
    startTime = Date.now();

var interval = setInterval(function () {
        if ($('#element').is(':visible')) {
            // visible, do something
            clearInterval(interval);
        } else {
            // still hidden
            if (Date.now() - startTime > maxTime) {
                // hidden even after 'maxTime'. stop checking.
                clearInterval(interval);
            }
        }
    },
    100 // 0.1 second (wait time between checks)
);

请注意,使用setInterval这种方式来保存手表可能会影响您网页的效果.

2018年7月7日:
由于这个答案最近得到了一些可见性和最高票数,这里有关于检测css变化的额外更新:

变异事件现在已被更具性能友好的Mutation Observer取代.

MutationObserver接口提供了监视对DOM树所做更改的功能.它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分.

参考:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

(function() {
    var ev = new $.Event('display'),
        orig = $.fn.css;
    $.fn.css = function() {
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

$('#element').bind('display', function(e) {
    alert("display has changed to :" + $(this).attr('style') );
});

$('#element').css("display", "none")// i change the style in this line !!
$('#element').css("display", "block")// i change the style in this line !!

http://fiddle.jshell.net/prollygeek/gM8J2/3/

更改将被提醒.