jQuery DIV 高度问题答案

【问题标题】：jQuery DIV height issuesjQuery DIV 高度问题
【发布时间】：2010-10-20 07:14:50
【问题描述】：

美好的一天:)

我在不透明度和高度上使用 jQuery 的 animate()，在一个固定大小的 div 上。
在 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;
}

如果你想看一个活生生的例子，我在这里临时设置了一个页面：click me!

非常感谢您对此事的任何帮助。

【问题讨论】：

标签： jquery internet-explorer height jquery-animate

【解决方案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);
        }
    );
}

【讨论】：

还有一点点闪烁，但还不错。
确实还有一点点闪烁，但这应该可以。谢谢:)

【解决方案2】：

您可以尝试在 jQuery 的 animate 调用中添加回调，并在回调中通过更改其 display 属性来隐藏 div。

【讨论】：

这会产生文本“嗨！”闪烁到它通常静止的位置，然后备份到链接旁边。