Question

美好的一天：）

我在不透明度和高度上使用jQuery的animate（），在固定大小的div上它在firefox中运行良好和花花公子，但在IE8（有和没有兼容模式，所以我假设它将在IE6和IE7中具有相同的行为），动画确实显示，但当div高度达到0％时， div的高度调整到该div内部文本的高度我立即做的第一件事就是将overflow设置为hidden，但它仍然会产生相同的行为。

我正在使用以下功能来缓慢切换高度/不透明度：

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;
}

如果您想要查看实际示例，我暂时在此处设置了一个页面：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。

jQuery DIV高度问题

2 个答案: