当元素变得可见时，jQuery

jQuery when element becomes visible

本文关键字：jQuery 元素      更新时间：2024-06-18

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

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

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

JQuery 中没有用于检测 css 更改的事件。
参考这里： jQuery 中的 onHide(( 类型事件
有可能：

DOM L2 Events 模块定义了突变事件;其中一个 - 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 事件规范的一部分。

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

(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/

更改将收到警报。

在火狐上试过这个，http://jsfiddle.net/Tm26Q/1/工作 

$(function(){
 /** Just to mimic a blinking box on the page**/
  setInterval(function(){$("div#box").hide();},2001);
  setInterval(function(){$("div#box").show();},1000);
 /**/
});
$("div#box").on("DOMAttrModified",
function(){if($(this).is(":visible"))console.log("visible");});

更新

目前，突变事件(如DOMAttrModified用于 解决方案(被突变观察者取代，您可以使用它来 检测 DOM 节点更改，如上述情况所示。

我只是改进了ProllyGeek的答案

有人可能会发现它很有用。您可以在元素上调用.show()、.hide()或.toggle()时访问displayChanged(event, state)事件

(function() {
  var eventDisplay = new $.Event('displayChanged'),
    origShow = $.fn.show,
    origHide = $.fn.hide;
  //
  $.fn.show = function() {
    origShow.apply(this, arguments);
    $(this).trigger(eventDisplay,['show']);
  };
  //
  $.fn.hide = function() {
    origHide.apply(this, arguments);
    $(this).trigger(eventDisplay,['hide']);
  };
  //
})();
$('#header').on('displayChanged', function(e,state) {
      console.log(state);
});
$('#header').toggle(); // .show() .hide() supported

一个包罗万象的jQuery自定义事件，基于其核心方法的扩展，就像它是由这个线程中的不同人提出的：

(function() {
    var ev = new $.Event('event.css.jquery'),
        css = $.fn.css,
        show = $.fn.show,
        hide = $.fn.hide;
    // extends css()
    $.fn.css = function() {
        css.apply(this, arguments);
        $(this).trigger(ev);
    };
    // extends show()
    $.fn.show = function() {
        show.apply(this, arguments);
        $(this).trigger(ev);
    };
    // extends hide()
    $.fn.hide = function() {
        hide.apply(this, arguments);
        $(this).trigger(ev);
    };
})();

然后，外部库使用 sth $('selector').css('property', value) 。

由于我们不想更改库的代码，但我们确实想扩展它的行为，我们这样做就像：

$('#element').on('event.css.jquery', function(e) {
    // ...more code here...
});

示例：用户单击由库构建的面板。该库根据用户交互显示/隐藏元素。我们希望添加一个传感器，该传感器显示由于该交互而隐藏/显示 sth，并且应该在库函数之后调用。

另一个例子：jsfiddle。

我喜欢插件 https://github.com/hazzik/livequery 它无需计时器即可工作！

用法简单

$('.some:visible').livequery( function(){ ... } );

但是你需要纠正一个错误。替换行

$jQlq.registerPlugin('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');

自

$jQlq.registerPlugin('show', 'append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');
相关文章：