元素可见时的jQuery

小编典典

元素可见时的jQuery

css

基本上，我想知道是否有一种方法可以在元素变为隐藏或可见时自动运行功能，而不是在用户单击时而是在另一个脚本中自动运行。

我不希望它只运行一次，因为元素（例如滑块）不断地从可见变为隐藏。

这是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
}

阅读 292

2020-05-16

共1个答案

小编典典

~~JQuery中没有事件可检测CSS更改。

可能是：

DOM L2事件模块定义了突变事件；其中之一-DOMAttrModified是您需要的。当然，它们并未得到广泛实施，但
至少在Gecko和Opera 浏览器中 受支持 。

来源：使用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更改的其他更新：

突变事件现已被性能更友好的突变观察者所取代。

MutationObserver接口提供了监视对DOM树所做的更改的功能。它旨在替代DOM3事件规范中较旧的Mutation Events功能。

2020-05-16