我在我的网站上使用jQuery，我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div，并有一定的代码运行时，他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
当前回答
在这里帮助我的是最近的ResizeObserver规格polyfill:
const divEl = $('#section60');
const ro = new ResizeObserver(() => {
if (divEl.is(':visible')) {
console.log("it's visible now!");
}
});
ro.observe(divEl[0]);
注意，它是跨浏览器和性能的(没有轮询)。
其他回答
<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';
}">
此代码自动控制不需要查询可见或不可见的控制
在这里帮助我的是最近的ResizeObserver规格polyfill:
const divEl = $('#section60');
const ro = new ResizeObserver(() => {
if (divEl.is(':visible')) {
console.log("it's visible now!");
}
});
ro.observe(divEl[0]);
注意，它是跨浏览器和性能的(没有轮询)。
我有同样的问题，并创建了一个jQuery插件来解决我们的网站。
https://github.com/shaunbowe/jquery.visibilityChanged
下面是基于你的例子你应该如何使用它:
$('#contentDiv').visibilityChanged(function(element, visible) {
alert("do something");
});
希望这将以最简单的方式完成工作:
$("#myID").on('show').trigger('displayShow');
$('#myID').off('displayShow').on('displayShow', function(e) {
console.log('This event will be triggered when myID will be visible');
});
这支持动画完成后的缓和和触发事件![jQuery 2.2.4测试]
(function ($) {
$.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
var result = el.apply(this, arguments);
var _self=this;
result.promise().done(function () {
_self.triggerHandler(ev, [result]);
//console.log(_self);
});
return result;
};
});
})(jQuery);
灵感来自http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/
