javascript - div变得可见时, 触发jQuery事件

我在站点中使用jQuery,当某个div可见时,想触发某些操作。

下面是伪代码:


$(function() {
 $('#contentDiv').isvisible(function() {
 alert("do something");
 });
});

时间:

Jquery扩展:


jQuery(function($) {

 var _oldShow = $.fn.show;

 $.fn.show = function(speed, oldCallback) {
 return $(this).each(function() {
 var obj = $(this),
 newCallback = function() {
 if ($.isFunction(oldCallback)) {
 oldCallback.apply(obj);
 }
 obj.trigger('afterShow');
 };

 // you can trigger a before show if you want
 obj.trigger('beforeShow');

 // now use the old function to show the element passing the new callback
 _oldShow.apply(obj, [speed, newCallback]);
 });
 }
});

用法示例:


jQuery(function($) {
 $('#test')
 .bind('beforeShow', function() {
 alert('beforeShow');
 }) 
 .bind('afterShow', function() {
 alert('afterShow');
 })
 .show(1000, function() {
 alert('in show callback');
 })
 .show();
});

你还可以创建另一个方法,不必重写原始的.show()方法。

触发器函数

比如,


//declare event to run when div is visible
function isVisible(){
 //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
 $(this).trigger('isVisible');
});

示例代码如下所示:


<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
 $('#show').click(function(){
 $('#testdiv').show();
 });

 var observer = new MutationObserver(function(mutations) {
 alert('Attributes changed!');
 });
 var target = document.querySelector('#testdiv');
 observer.observe(target, { attributes: true });

});
</script>

解 redsquare 是正确的/逻辑的答案。

可是作为 IN-THEORY解决方案分类,你可以编写一个函数,能选择的元素通过 .visibilityCheck 类( 不是所有可见元素 ) 及核对 visibility 属性值;如果 true 就做一些东西。 确定?
之后,应该使用 setInterval() 函数定期执行函数。 如你所知,你可以停止该计时器使用 clearInterval() 和时间标识的函数call-out一旦成功的。


function foo(){
 $('.visibilityCheck').each(function(){
 if($(this).is(':visible')){
//do something
 }
 });
}//foo()
window.setInterval(foo, 100);

在操作中,我在这里,但该解决方案基本上是忽略think,还可以执行对性能进行了提升与过去通用

你可以使用jQuery的livequery插件,并编写如下代码:


$('#contentDiv:visible').livequery(function() {
 alert("do something");
});

然后每次contentDiv可见时,将出现提醒!

如果要在所有实际可见的元素(和子元素)上触发事件,请使用 $.show, toggle, toggleClass, addClass, or removeClass : :


$.each(["show","toggle","toggleClass","addClass","removeClass"], function(){
 var _oldFn = $.fn[this];
 $.fn[this] = function(){
 var hidden = this.find(":hidden").add(this.filter(":hidden"));
 var result = _oldFn.apply(this, arguments);
 hidden.filter(":visible").each(function(){
 $(this).triggerHandler("show"); //No bubbling
 });
 return result;
 }
});

现在你的元素:


$("#myLazyUl").bind("show", function(){
 alert(this);
});

基于Glenns ideea的hide/show事件触发器:


$(function(){
 $.each(["show","hide","toggleClass","addClass","removeClass"], function(){
 var _oldFn = $.fn[this];
 $.fn[this] = function(){
 var hidden = this.find(":hidden").add(this.filter(":hidden"));
 var visible = this.find(":visible").add(this.filter(":visible"));
 var result = _oldFn.apply(this, arguments);
 hidden.filter(":visible").each(function(){
 $(this).triggerHandler("show");
 });
 visible.filter(":hidden").each(function(){
 $(this).triggerHandler("hide");
 });
 return result;
 }
 });
});

在 Glenns idea,我换了隐藏/显示事件触发器从 Catalint based. 我的问题是我有一个模块化的应用程序。 在显示和隐藏div父类的模块之间进行更改。 然后当我隐藏一个模块并显示另一个模块时,当我在模块之间进行切换时,我有一个可见的延迟。 我只需要偶尔在一些特殊的孩子身上。 所以我决定只通知孩子 class displayobserver"


$.each(["show","hide","toggleClass","addClass","removeClass"], function () {
 var _oldFn = $.fn[this];
 $.fn[this] = function () {
 var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
 var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
 var result = _oldFn.apply(this, arguments);
 hidden.filter(":visible").each(function () {
 $(this).triggerHandler("show");
 }); 
 visible.filter(":hidden").each(function () {
 $(this).triggerHandler("hide");
 });
 return result;
 }
});

然后当一个孩子想要听"显示"或者"隐藏"事件时,我必须将它的添加到类"displayobserver"中,当它不想继续监听时,我将把它删除


bindDisplayEvent: function () {
 $("#child1").addClass("displayObserver");
 $("#child1").off("show", this.onParentShow);
 $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
 $("#child1").removeClass("displayObserver");
 $("#child1").off("show", this.onParentShow);
},

我希望帮助

使用jQuery Waypoints:


$('#contentDiv').waypoint(function() {
 alert('do something');
});

jQuery Waypoints的站点。

...