jQuery的DIV高度问题

Question

好天：）

我使用jQuery的动画（）在两个不透明度和高度，在一个固定大小的div。结果  这一切工作正常，并在Firefox花花公子，但在IE8（与不兼容模式，所以我假设它会在IE6和IE7相同的行为），动画做节目，但是当DIV高度达到0％， 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

有关其动画为1px，然后隐藏在div动画完成后怎么办？此外，请务必从1px的动画至500像素前再次显示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。