jQueryのDIVの高さの問題

Question

良い一日：）

私は、固定サイズのdivに、不透明度と高さの両方に）（jQueryのアニメーションを使用しています。
 それはすべての罰金とFirefoxでダンディ動作しますが、IE8で（ととの互換性モードなしで、私はそれがIE6とIE7で同じ動作を持つことになりますと仮定しています）、アニメーションがショーを行いますが、divの高さが0％に達したときに、 div要素の高さは、その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);
});

私の "B1" のdivのスタイルは、次のされます：

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

あなたは、むしろ実際の例を見てみたいと思います場合、私は一時的にこっちのページを設定しました：私をクリックしてください！の

この問題に関するすべてのヘルプははるかに高く評価されます。

Answer 1

アニメーションが行われた後のdivを隠し、その後、それは1ピクセルするアニメーションはどう？また、500pxなどに1ピクセルからアニメーションの前に再び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を非表示にすることができます。