jQuery元素变得可见
基本上，我想知道是否有一种方法来自动运行一个function，当一个元素变得隐藏或可见，而不是在用户点击，但自动在另一个脚本。
我不希望这只是运行一次，因为元素（如滑块）不断从可见变为隐藏。
这是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（）types事件
有可能的：
DOM L2事件模块定义突变事件; 其中之一 – DOMAttrModified是你需要的。 当然，这些并没有得到广泛的实施，但至less在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
目前， 突变事件 （如解决scheme中使用的
DOMAttrModified）被replace为MutationObserver ，您可以使用它来检测DOM节点更改，如上述情况。
我刚刚改进了ProllyGeek的答案
有人可能会觉得它有用。 在元素上调用.toggle()或.toggle()时displayChanged(event, state)可以访问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
我喜欢插件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');
