jQuery when element becomes visible

Basically, I am wondering if there is a way to automatically run a function when an element becomes hidden or visible, not on a user click but automatically in another script.

I don't want this to just run one time, because the elements (such as a slider) constantly change from visible to hidden.

Would this be something that jQuery can do with bind? Such as binding the element's visibility to a function (I don't know how to write this)

If you need me to elaborate more on what I'm trying to do, let me know. Thanks

Pseudocode:

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

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

---

There are no events in JQuery to detect css changes.
Refer here: onHide() type event in jQuery
It is possible:

DOM L2 Events module defines mutation events; one of them - DOMAttrModified is the one you need. Granted, these are not widely implemented, but are supported in at least Gecko and Opera browsers.
Source: Event detect when css property changed using Jquery

You will have to do something like:

var maxTime = 2000; // 2 seconds
var time = 0;

var interval = setInterval(function () {
  if($('#element').is(':visible')) {
    // visible, do something
    clearInterval(interval);
  } else {
    if (time > maxTime) {
      // still hidden, after 2 seconds, stop checking
      clearInterval(interval);
      return;
    }

    // not visible yet, do something
    time += 100;
  }
}, 200);

---

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

changes will be alerted.

---

Tried this on firefox, works 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");});

UPDATE

Currently the Mutation Events (like DOMAttrModified used in the solution) are replaced by MutationObserver, You can use that to detect DOM node changes like in the above case.

链接地址: http://www.djcxy.com/p/83382.html

上一篇: 当元素出现在屏幕上时触发jquery事件

下一篇: 元素变得可见时jQuery