Проблемы с высотой jQuery DIV

Question

Хорошего дня :)

Я использую animate() от jQuery как для непрозрачности, так и для высоты, для 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);
});

Стиль для моего div "b1" следующий:

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

Если вы предпочитаете посмотреть живой пример, я временно создал страницу здесь: кликни меня!

Любая помощь в этом вопросе очень ценится.

Answer 1

Как насчет того, чтобы анимировать его до 1 пикселя, а затем скрыть div после завершения анимации?Кроме того, обязательно снова покажите div перед анимацией от 1px до 500px.

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

Вы можете попробовать добавить обратный вызов к вызову animate jQuery и внутри обратного вызова скрыть div, изменив его свойство display .