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

Question

Добрый день:)

Я использую jQuery's animate () как для непрозрачности, так и для высоты, с делением фиксированного размера.
В 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 после завершения анимации? Кроме того, не забудьте снова показать div перед анимацией от 1 до 500 пикселей.

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, изменив его свойство display.