jquery 检查哪些分区是可见的-淡入淡出功能不允许立即检查?

pw136qt2  于 2022-12-26  发布在  jQuery
关注(0)|答案(2)|浏览(177)

情况

我有一系列的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”,而不仅仅是我应该将其放在哪里。

xggvc2p6

xggvc2p61#

您可以将事件附加到淡入淡出的完成:

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

o7jaxewo2#

在你的自定义动画方法中添加一个回调函数,如果提供了回调函数,在动画的回调代码中调用这个回调函数,这样你就可以在动画完成后添加一些东西。我将依赖于动画完成后你所期望的状态。

$('#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 ...
        });
    }
});

相关问题