Question

情况

我有一系列div设置包含各种内容：

<div id="main">
    <div id="about"></div>
    <div id="contact"></div>
    <div id="flickr"></div>
    <div id="twitter"></div>
</div>

我还有一个导航，可以从上面淡入和淡出特定的div（使用animate或fade功能）。

问题

我希望能够在使用导航时检查隐藏所有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
}

然而，这被证明是困难的，因为由于fade函数的延迟将div更新为隐藏，因此检查始终是一个div。

有没有强大的方法来检查是否所有div都被隐藏了？在点击导航中的项目时初始化检查，并考虑到每个div需要一定的持续时间才能在单击项目后实际设置为隐藏？

干杯。

编辑 - 我想要一个包含'检查隐藏的div'的解决方案，而不仅仅是我应该把它放在哪里。感谢。

Answer 1

您可以附加事件以完成淡入淡出：

$("#MyDiv").fade(100,function(){
    DoSomething();
});

Answer 2

向自定义动画方法添加回调函数，在动画的回调代码中调用此回调（如果提供），以允许您在动画完成后附加一些要做的事情。动画完成后，我会依赖于你所期望的状态。

$('#toggleContact').click(function() {
    if (!$("#contact .tab").is(':animated')) {
        $('#contact .tab').fadeThenSlideToggle( function() {
              // since this is the callback, we assume that the animation
              // has hidden all but one of the tabs
              ... more stuff to do after the animation is complete ...
        });
    }
});

jQuery - 检查哪些div是可见的 - 淡入淡出函数不允许立即检查？

2 个答案: