problemi di altezza jQuery DIV

Question

Buona giornata:)

Sto usando animato di jQuery () sia l'opacità e l'altezza, su un div di dimensione fissa.
 Tutto funziona bene e dandy in firefox, ma in IE8 (con e senza compatibilità-mode, quindi presumo avrà lo stesso comportamento in IE6 e IE7), l'animazione fa spettacolo, ma quando l'altezza div raggiunge 0%, l'altezza del div regola per l'altezza del testo all'interno di quel div.
La prima cosa che ho fatto immediatamente è stata impostata troppo pieno di nascosto, ma dà ancora lo stesso comportamento.

Sto usando la seguente funzione per alternare lentamente altezza / opacità:

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

Stile per il mio div "b1" è il seguente:

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

Se si preferisce volete vedere dal vivo un esempio, ho temporaneamente impostare una pagina qui: click me !

Qualsiasi aiuto su questa materia è molto apprezzato.

Answer 1

Che dire di animare a 1px, poi nascondere il div dopo l'animazione è fatto? Inoltre, assicurarsi di mostrare nuovamente il div prima che anima da 1px 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

Si può provare ad aggiungere un callback per chiamata animato di jQuery, e dentro il callback nascondere il div modificando è proprietà di visualizzazione.