slideDownおよびslideUpエラー

Question

jQueryを初めて使用しましたが、すでに組み込まれている slideDown（）/ slideUp（）アニメーションで問題が発生しています。柔軟な幅の 要素を使用していますが、この関数を使用すると、要素は に戻りません。私はこれが方法と関係があると考えています jQueryは要素の幅を見つけます。

<div id="archive"> 
    <h2 class="first open">May</h2> 
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list"> 
     <tr class="first"> 
       <td width="65%"><a href="#">This month</a></td> 
       <td align="right">Sunday, May 31 <input type="button" value="Edit"/></td> 
     </tr> 
    </table> 
</div> 

とJavaScript：

// Enable month names to re-open divs 
$("#archive h2").not(":last").wrapInner("<a href='#'></a>").end().find 
("a").click(function(event){ 

event.preventDefault(); 

var h2 = $(this).parent(); 

if (h2.hasClass("open")) { // Close 

    h2.removeClass("open"); 
    h2.next().slideUp("fast"); 


} else { // Open 

    h2.addClass("open"); 
    h2.next().slideDown("fast"); 


} 

}); 

問題は多少ラップすることによって解決することができる私は、ページのHTMLです以下はOS X用のSafari 3とFirefox 3.1でエラーが発生していますFirefoxで新しいエラーが発生し、slideDownアニメーションが最後まで飛びます。

ご協力いただければ幸いです。 H2要素のマージンを持っており、CSS垂直マージン意志collapseのルールに従ってため

おかげで、 ブレンダン

Answer 1

だから、div内の各テーブルをネストしてから、テーブルの幅を静的な幅に設定するということが判明しました。私の場合は、 "600px"。私はいくつかの実験を行いました。覚えているように、jQueryが要素の高さを見つけたら、それを位置に設定します：abolsute; visibility：none;私の場合は、100％幅を100％のままにして、100％幅のようにレンダリングしてください。だから、jQueryをその高さに合わせてアニメーション化し、すべてを通常の状態に戻して、ブラウザを実際の高さにスナップバックさせます。

Answer 2

「ジャンプ」が起こります。

アニメーションが始まる前に、H2見出しが表で区切られています。見出しは、それらの上や下にいくつかの余裕を持って、表には何を持っていません：

+--------------------------+ 
|       | 
|H2: April     | 
|       | 
+--------------------------+ 
|||||||||||||||||||||||||||| 
|TABLE in the middle  | 
|||||||||||||||||||||||||||| 
+--------------------------+ 
|       | 
|H2: May     | 
|       | 
+--------------------------+ 

その後、テーブルがスムーズにちょうど2つの見出しであなたを残して、離れてアニメーションを取得します：

+--------------------------+ 
|       | 
|H2: April     | 
|       | 
+--------------------------+ 
|       | 
|H2: May     | 
|       | 
+--------------------------+ 

そして突然、何の表がどのありませんこれらの見出しと余白の間にはさらに次のようなものがあります。

+--------------------------+ 
|       | 
|H2: April     | 
|       | 
|H2: May     | 
|       | 
+--------------------------+ 

そして、その崩壊によって「ジャンプ」が発生します。これに

一つの可能​​な解決策は、パディングとH2マージンを置き換えることです：

#archive h2 { 
    margin: 0; 
    padding: 0.5em 0; 
} 

ガスケットが潰れることはありません。