jQuery DIV problèmes de hauteur

Question

Bonjour:)

J'utilise le Animer jQuery () à la fois sur l'opacité et la hauteur, sur un div de taille fixe.
 Tout fonctionne très bien et dandy dans Firefox, mais dans IE8 (avec et sans la compatibilité mode, donc je suppose qu'il aura le même comportement dans IE6 et IE7), l'animation ne montre, mais quand la hauteur div atteint 0%, la hauteur de la div ajuste à la hauteur du texte à l'intérieur de ce div.
La première chose que j'ai immédiatement fait a été trop-plein de caché, mais il donne toujours le même comportement.

J'utilise la fonction suivante pour basculer lentement hauteur / 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);
});

Style pour mon "b1" div est la suivante:

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

Si vous souhaitez plutôt voir un exemple en direct, je suis temporairement mis en place une page ici: me cliquent sur !

Toute aide à ce sujet est très apprécié.

Answer 1

Qu'en est-il animant à 1px, cachant alors la div après que l'animation se fait? Aussi, assurez-vous de montrer la div nouveau avant de 1px animant à 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

Vous pouvez essayer d'ajouter un rappel à l'appel d'Animer jQuery, et dans le rappel cacher la div en changeant sa propriété d'affichage.