我在我的网站上使用jQuery，我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div，并有一定的代码运行时，他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
当前回答
你也可以尝试一下jQuery插件中提到的并行线程https://stackoverflow.com/a/3535028/741782
其他回答
如果您想在所有实际可见的元素(和子元素)上触发事件，则使用$。show, toggle, toggleClass, addClass，或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);
});
你可以通过将额外的jQuery函数添加到顶部的数组(如“attr”)来添加覆盖。
只需将触发器与选择器绑定，并将代码放入触发器事件中:
jQuery(function() {
jQuery("#contentDiv:hidden").show().trigger('show');
jQuery('#contentDiv').on('show', function() {
console.log('#contentDiv is now visible');
// your code here
});
});
<div id="welcometo">Özhan</div>
<input type="button" name="ooo"
onclick="JavaScript:
if(document.all.welcometo.style.display=='none') {
document.all.welcometo.style.display='';
} else {
document.all.welcometo.style.display='none';
}">
此代码自动控制不需要查询可见或不可见的控制
你总是可以添加到原始的.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()方法。
有一个jQuery插件可以观察DOM属性的变化，
https://github.com/darcyclarke/jQuery-Watch-Plugin
你需要做的就是绑定MutationObserver
然后你可以使用它来观看div使用:
$("#selector").watch('css', function() {
console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
//or any random events
});
