jQuery DIVの高さの問題

Question

良い日:)

固定サイズのdivの不透明度と高さの両方でjQueryのanimate（）を使用しています。
これはすべてうまく動作しますが、IE8では（互換モードの有無にかかわらず、IE6とIE7では同じ動作をすると仮定しています）、アニメーションは表示されますが、divの高さが0になると％の場合、divの高さはdiv内のテキストの高さに合わせて調整されます。
私が直ちに行った最初のことは、オーバーフローが隠されているように設定されていましたが、それでもやはり同じ動作をします。私はゆっくりと高さ/不透明を切り替えるには、以下の機能を使用してい

：

div#b1 { 
    color:  #ffffff; 
    background-color: #000000; 
    overflow:  hidden; 
    width:  600px; 
    height:  500px; 
    padding:  0px; 
    margin:  0px; 
    display:  block; 
} 

あなたはかなりしたいと思います場合は：私の「B1」のdivのため

function OpacityFadeToggle(e_trigger, e_element, speed) 
{ 
    $(e_trigger).toggle(
     function() { 
      $(e_element).animate({ 
       opacity: 0.0, 
       height:  "0px" 
      }, speed); 
     }, 
     function() { 
      $(e_element).animate({ 
       opacity: 1.0, 
       height:  "500px" 
      }, speed); 
     } 
    ); 
} 

$(function() { 
    OpacityFadeToggle("a#a2", "div#b1", 1000); 
}); 

スタイルは、次のことです実際の例を見ると、一時的にここにページを設定しました：click me!

この問題に関するお手伝いがあります。

Answer 1

アニメーションを1pxにアニメーションしてから、アニメーションが終了してからdivを隠すのはどうですか？また、1pxから500pxにアニメーション化する前にdivを再度表示するようにしてください。

function OpacityFadeToggle(e_trigger, e_element, speed) 
{ 
    $(e_trigger).toggle(
     function() { 
       $(e_element).animate({ 
         opacity:  0.0, 
         height:   "1px" 
       }, speed).hide(); 
     }, 
     function() { 
       $(e_element).show().animate({ 
         opacity:  1.0, 
         height:   "500px" 
       }, speed); 
     } 
    ); 
} 

Answer 2

jQueryのアニメーションコールにコールバックを追加できます。コールバック内では、表示プロパティを変更してdivを非表示にできます。