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更改请参阅此处：onHide() type event in jQuery~~
有可能：

DOM L2 Events模块定义了突变事件;其中之一 - DOMAttrModified是您需要的。当然，这些并没有得到广泛实施，但至少在Gecko和Opera 浏览器中得到了支持。资料来源：Event detect when css property changed using Jquery

没有事件，您可以使用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/

将会发出警告。

Answer 3

在firefox上试过这个，有效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");});

更新

目前 Mutation Events （例如DOMAttrModified中使用的{{1}}   解决方案）被MutationObserver取代，您可以使用它   检测DOM节点的变化，如上例所示。

Answer 4

我刚刚改进了ProllyGeek的回答

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

(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

Answer 5

我喜欢插件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');

Answer 6

一个全能的 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);
    };
})();

然后，外部库使用类似$('selector').css('property', value)的内容。

由于我们不想改变图书馆的代码，但我们 DO 想要扩展它的行为，我们会这样做：

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

示例：用户单击由库构建的面板。该库根据用户交互显示/隐藏元素。我们想要添加一个传感器，该传感器显示由于该交互而隐藏/显示某些信息，并且在库函数之后应该被称为。

另一个例子：jsfiddle。

当元素变得可见时jQuery

6 个答案:

更新