0

良い一日 ：）

固定サイズの div で、不透明度と高さの両方で jQuery の animate() を使用しています。
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;
}

実際の例を見たい場合は、ここに一時的にページを設定しました:クリックしてください!

この問題に関するヘルプは大歓迎です。

4

2 に答える 2

4

それを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);
        }
    );
}
于 2009-04-18T15:43:45.440 に答える
1

jQueryのanimate呼び出しにコールバックを追加してみてください。コールバック内で、そのdisplayプロパティを変更してdivを非表示にします。

于 2009-04-18T15:43:07.503 に答える