情况
我有一系列的 div 设置来包含各种内容:
<div id="main">
<div id="about"></div>
<div id="contact"></div>
<div id="flickr"></div>
<div id="twitter"></div>
</div>
我还有一个导航,可以从上面淡入和淡出特定的 div(使用动画或淡入淡出功能)。
问题
我希望能够在使用导航时检查所有 div 何时隐藏 - 以便我可以在所有 div 隐藏时触发事件。
//Custom animation function.
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
if (this.is(":hidden")) {
return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
} else {
return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
}
};
//example nav items.
$('#toggleContact').click(function() {
if (!$("#contact .tab").is(':animated')) {
$('#contact .tab').fadeThenSlideToggle(); //custom animation function
}
});
$('#toggleAbout').click(function() {
if (!$("#about .tab").is(':animated')) {
$('#about .tab').fadeThenSlideToggle();
}
});
//example check to see if all divs are hidden.
if((($(":hidden", '#main').length == 3) { //3 not 4 due to delay :S
}
然而,事实证明这很困难,因为由于淡入淡出功能将 div 更新为隐藏的延迟,检查始终会超出一个 div。
是否有任何可靠的方法来检查所有 div 是否都被隐藏?单击导航中的项目时初始化检查,并考虑到一旦单击该项目,每个 div 需要一定的持续时间才能实际设置为隐藏?
编辑-我想要一个包含“检查隐藏的 div”的解决方案,而不仅仅是我应该放置它的位置。
最佳答案
您可以在淡入淡出完成时附加一个事件:
$("#MyDiv").fade(100,function(){
DoSomething();
});
关于javascript - 检查哪些 div 可见 - 淡入淡出功能不允许立即检查?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1271465/