cuestiones altura jQuery DIV

Question

Buenos días:)

Estoy utilizando animado de jQuery () en tanto la opacidad y la altura, en un div de tamaño fijo.
 Todo funciona bien y dandy en Firefox, pero en IE8 (con y sin compatibilidad modo, por lo que estoy suponiendo que tendrá el mismo comportamiento en IE6 y IE7), la animación hace espectáculo, pero cuando la altura div llega a 0%, la altura de la div ajusta a la altura del texto dentro de ese div.
La primera cosa que hice de inmediato se puso a desbordamiento oculta, pero todavía da el mismo comportamiento.

Estoy usando la siguiente función para cambiar poco a poco altura / opacidad:

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

estilo de Mi div "B1" es el siguiente:

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

Si prefiere quiere ver un ejemplo vivo, he establecido temporalmente una página aquí: click me !

Cualquier ayuda en este asunto es muy apreciada.

Answer 1

¿Qué hay de lo anima a 1px, a continuación, ocultar el div después de la animación se hace? Además, asegúrese de mostrar el div de nuevo antes de la animación a partir de 1 píxel a 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

Puede intentar añadir una devolución de llamada a llamada animado de jQuery, y dentro de la devolución de llamada ocultar la div cambiando es propiedad de presentación.