我在我的网站上使用jQuery,我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div,并有一定的代码运行时,他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
我在我的网站上使用jQuery,我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div,并有一定的代码运行时,他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
当前回答
你总是可以添加到原始的.show()方法中,这样你就不必每次显示一些东西时都触发事件,或者如果你需要它与遗留代码一起工作:
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()方法的正常行为的同时执行beforeShow和afterShow操作。
您还可以创建另一个方法,这样就不必重写原来的.show()方法。
其他回答
没有本地事件你可以挂钩到这个,但是你可以触发一个事件从你的脚本后,你已经使div可见使用.trigger函数
e.g
//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');
});
你也可以尝试一下jQuery插件中提到的并行线程https://stackoverflow.com/a/3535028/741782
$( window ).scroll(function(e,i) {
win_top = $( window ).scrollTop();
win_bottom = $( window ).height() + win_top;
//console.log( win_top,win_bottom );
$('.onvisible').each(function()
{
t = $(this).offset().top;
b = t + $(this).height();
if( t > win_top && b < win_bottom )
alert("do something");
});
});
Redsquare的解决方案是正确的答案。
但是作为一个IN-THEORY解决方案,你可以编写一个函数来选择由.visibilityCheck(不是所有可见元素)分类的元素,并检查它们的可见性属性值;如果是这样,那就做点什么。
之后,应该使用setInterval()函数定期执行该函数。您可以在成功调用时使用clearInterval()停止计时器。
这里有一个例子:
function foo() {
$('.visibilityCheck').each(function() {
if ($(this).is(':visible')){
// do something
}
});
}
window.setInterval(foo, 100);
您还可以对其执行一些性能改进,但是,该解决方案基本上不适合实际使用。所以…
我根据Glenns的想法改变了Catalint的隐藏/显示事件触发器。 我的问题是我有一个模块化的应用程序。我改变模块之间显示和隐藏div父母。然后,当我隐藏一个模块并显示另一个模块时,用他的方法,当我在模块之间更改时,我有一个可见的延迟。我只需要偶尔听一听这件事,而且是在一些特殊的孩子身上。所以我决定用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;
}
});
然后,当一个孩子想要监听“show”或“hide”事件时,我必须给他添加类“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);
},
我希望得到帮助