1

'fast'を使用してjqueryのtoggleメソッドを使用して非表示/表示しているdivがあります。トグルが発生した直後に、トグルされたdivのcss表示ステータスをログに記録します。表示から非表示に変わると、ステータスは「ブロック」として表示されます。

しかし、jqueryのドキュメントによると、「none」になっているはずです。

期間が指定されると、.toggle（）はアニメーションメソッドになります。.toggle（）メソッドは、一致した要素の幅、高さ、不透明度を同時にアニメーション化します。アニメーションを非表示にした後でこれらのプロパティが0に達すると、要素がページのレイアウトに影響を与えないように、表示スタイルプロパティがnoneに設定されます。

$(this).parents('#accordionContainer').find('div.accordionContent').toggle('fast');
    console.log($(this).parents('#accordionContainer').find('div.accordionContent').css('display'));

私のコンソールログ出力：

ブロック

jquery .... min.js（162行目）

編集：ここで大声で考えていますが、トグルと表示チェックの間にsetTimeoutを実行する必要があるかどうか疑問に思っていますか？おそらく1秒程度ですか？さらに良いことに、toggleはisFinishedメッセージなどを返しますか？

4

1 に答える 1

0

トグルを呼び出した「直後」に、メソッドは非同期的にアニメーション化されます。アニメーションを行うために幅と高さを調整しているため、CSS を display:block として宣言する必要があります。アニメーションが完了すると、CSS は期待どおりに display:none になります。

コールバック パラメータを toggle() 関数に指定することで、アニメーションの完了後にコードを呼び出すことができます。例えば：

$(this).parents('#accordionContainer').find('div.accordionContent').toggle('fast', 
    function() {
        // This is called when the toggle animation is complete
        console.log( $(this).parents('#accordionContainer').find('div.accordionContent').css('display'));
    }
);

JSFiddle: http://jsfiddle.net/Ggfe4

于 2012-08-07T14:28:50.320 に答える