我在我的网站上使用jQuery，我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div，并有一定的代码运行时，他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
当前回答
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>
其他回答
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>
没有本地事件你可以挂钩到这个，但是你可以触发一个事件从你的脚本后，你已经使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插件可以观察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
});
有一种方法。 只适用于由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); }
这支持动画完成后的缓和和触发事件![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/
