2

状況

さまざまなコンテンツを含める一連の div セットアップがあります。

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

上から特定の div をフェードインおよびフェードアウトするナビゲーションもあります (アニメーションまたはフェード機能を使用)。

問題

すべての div が非表示になっているときにイベントをトリガーできるように、nav を使用しているときに、すべての 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 を非表示に更新するフェード機能の遅延により、チェックは常に 1 つの div アウトであるため、これは困難であることがわかっています。

すべての div が非表示になっているかどうかを確認する堅牢な方法はありますか? ナビゲーションのアイテムをクリックしたときにチェックを初期化し、アイテムがクリックされると、各 div が実際に非表示に設定されるまでに一定の時間がかかることを考慮していますか?

乾杯。

編集-どこに置くべきかだけでなく、「隠しdivのチェック」を含むソリューションが欲しいです。ありがとう。

4

2 に答える 2

2

フェードの完了にイベントを添付できます。

$("#MyDiv").fade(100,function(){
    DoSomething();
});
于 2009-08-13T11:44:06.870 に答える
1

コールバック関数をカスタム アニメーション メソッドに追加します。提供されている場合は、アニメーションのコールバック コードでこのコールバックを呼び出して、アニメーションの完了後に行うことを追加できるようにします。アニメーションが完了したら、状態が期待どおりになるかどうかに依存します。

$('#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 ...
        });
    }
});
于 2009-08-13T11:46:13.340 に答える