元素变得可见时jQuery
基本上,我想知道是否有一种方法可以在元素变为隐藏或可见时自动运行函数,而不是在用户单击时自动运行,而是在另一个脚本中自动运行。
我不想让它只运行一次,因为元素(例如滑块)不断从可见变为隐藏。
这是jQuery可以绑定的东西吗? 比如将元素的可见性绑定到一个函数(我不知道该怎么写)
如果您需要我详细说明我想要做什么,请告诉我。 谢谢
伪代码:
$('#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事件模块定义突变事件; 其中之一 - DOMAttrModified是你需要的。 当然,这些并没有得到广泛的实施,但至少在Gecko和Opera浏览器中得到支持 。
来源:使用Jquery更改css属性时的事件检测
你将不得不做一些事情:
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/
更改将会提醒。
试过这个在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");});
UPDATE
目前,突变事件(如解决方案中使用的DOMAttrModified
)被替换为MutationObserver,您可以使用它来检测DOM节点更改,如上述情况。