jQuery div 높이 문제

Question

좋은 날 :)

나는 불투명도와 높이에 JQuery 's 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;
}

라이브 예제를보고 싶다면 여기에 페이지를 일시적으로 설정했습니다. 클릭 해주세요!

이 문제에 대한 도움은 대단히 감사합니다.

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를 숨 깁니다.