我在我的网站上使用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实际可见之前不应该触发。
谢谢。
当前回答
有一种方法。 只适用于由css类更改引起的可见性更改,但也可以扩展到观察属性更改。
var observer = new MutationObserver(function(mutations) {
var clone = $(mutations[0].target).clone();
clone.removeClass();
for(var i = 0; i < mutations.length; i++){
clone.addClass(mutations[i].oldValue);
}
$(document.body).append(clone);
var cloneVisibility = $(clone).is(":visible");
$(clone).remove();
if (cloneVisibility != $(mutations[0].target).is(":visible")){
var visibilityChangedEvent = document.createEvent('Event');
visibilityChangedEvent.initEvent('visibilityChanged', true, true);
mutations[0].target.dispatchEvent(visibilityChangedEvent);
}
});
var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
});
function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }
其他回答
你总是可以添加到原始的.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()方法。
DOM突变观察者正在解决这个问题。它们允许你将观察者(一个函数)绑定到改变dom元素的内容、文本或属性的事件上。
随着IE11的发布,所有主流浏览器都支持此功能,请访问http://caniuse.com/mutationobserver
示例代码如下:
$(函数() { $('#show').click(function() { $('#testdiv').show(); }); var observer = new MutationObserver (function(mutations) { 警报(“属性已更改! }); var target = document.querySelector('#testdiv'); observer.observe(target, { 属性:真 }); }); <div id=“testdiv” style=“display:none;”>hidden</div> <按钮 id=“显示”>显示隐藏的 div</button> <script type=“text/javascript” src=“https://code.jquery.com/jquery-1.9.1.min.js”></script>
$( 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);
您还可以对其执行一些性能改进,但是,该解决方案基本上不适合实际使用。所以…
这支持动画完成后的缓和和触发事件![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/