Problème en utilisant JQuery pour animer une division à 100% de hauteur

Question

Bonjour, j'utilise Jquery pour animer un div d'une hauteur définie à 100% puis revenir à une hauteur définie. Cela est utilisé pour afficher/masquer du texte d'un article wordpress qui est plus long que la hauteur définie (le débordement est masqué). Je ne peux pas animer le div de la hauteur définie à 100% - plutôt, le div passe directement à 100% de la hauteur. Il revient à sa taille définie en douceur. Je ne peux pas fixer une hauteur pour l'animation car les articles auront toujours une hauteur différente en fonction de la quantité de texte écrit.

Voici le code JQuery :

$(document).ready(function(){

     $(".read_more").toggle(function(){
     $(this).prev(".entry").animate({height:"100%"}, {
    queue:false,
    duration:1000,
    easing: "easeOutQuart"});
     },

function(){  

        $(this).prev(".entry").animate({height:"5.9em"}, {
        queue:false,
        duration:1000,
        easing: "easeOutQuart"});

});         
});

Le CSS :

.entry {

     float:left;
     position:relative;
     width:870px;
     height:5.9em;
     overflow:hidden;
     padding: 0px 10px 10px 10px;
     display:block;
}

Fondamentalement, le div .entry est enveloppé dans un conteneur qui positionne l'en-tête de l'article, l'article et un séparateur d'articles. L'animation fonctionne si je plugue une valeur fixe mais je n'ai pas de chance avec le 100%. Des idées ?

Voici le jquery complet (les yellow_read, invistext et gray_read sont du texte qui, lorsqu'il est cliqué, déclenche l'animation et passe de l'expansion à la rétractation).

$(document).ready(function(){
     $(".read_more").toggle(function(){
     $(this).prev(".entry").animate({height:"100%"}, {
    queue:false,
    duration:1000,
    easing: "easeOutQuart"});
     $(this).children(".yellow_read").css("display","none");   
     $(this).children(".invistext").css("display","inline");
     $(this).children(".gray_read").css("display","none");
},

function(){  
    $(this).prev(".entry").animate({height:"5.9em"}, {
    queue:false,
    duration:1000,
    easing: "easeOutQuart"});
$(this).children(".yellow_read").css("display","inline");   
    $(this).children(".invistext").css("display","none");
    $(this).children(".gray_read").css("display","inline"); 
});     

});

Voici le CSS complet

        #content{
            width:1000px;
            margin-left:16em;
            padding-top:15em;
            position:absolute;
            overflow:hidden;
            display:block;
            }

            *:first-child+html #content{
                height:1000px;
                position:relative;
                float:left;
                width:400px;
                padding: 0px 0px 0px 0px;

                }

            .post{
            float:left;
            position:relative;
            margin-bottom:10px;
            padding:9px
            }

            .post p{
                font-size:.9em; /*contrôle le corps de l'article lorsque WP sIFR est désactivé*/
                line-height:1.8em; /*contrôle le corps de l'article lorsque WP sIFR est désactivé*/
                }

            .post p a:hover, .post p a:active{ color: #ed1c24; text-decoration:none;}

            .postHeading{
                float:left;
                position:relative;
                width:870px;    

                }

                .postTitle{
                    float:left;
                    position:relative;
                    padding:5px 7px 5px 7px;

                    }

                    * html .postTitle{
                        width:860px;
                        padding:5px 7px 5px 7px;
                    }

                .postTitle h2{
                    line-height:1.2;
                    margin:0;
                    padding:0;
                    color:#ed1c24;
                    font-size:1.8em;
                }

            .entry {
                float:left;
                position:relative;
                width:870px;
                color: #fff;
                height:5.9em;
                overflow:hidden;
                padding: 0px 10px 10px 10px;
                display:block;
                }

            .entry a a:link, .entry p a:visited{ color:#fff200; text-decoration:none;}

            .read_more {                
                width:870px;
                font-size:14px;
                color: #999999;
                float:left;
                position:relative;
                padding: 10px 5px 10px 10px;
                cursor:pointer;
                }

                * html .read_more{
                    width:870px;
                    }

            SPAN.gray_read{             
                color: #999999;
                font-size:.8em;
                }

            SPAN.yellow_read{
                color: #fff200;
                font-size:.8em;
                }

            SPAN.invistext{
                display:none;
                color: #ff5d00;
                font-size:.8em;
                }

            .divider {  
                background:url(images/divider.png) no-repeat center;
                width:680px;
                height:6px;
                float:left;
                position:relative;
                }

                    * html .divider{
                        width:680px;
                    }

et le html :

    Lire 
         Plus 
             +
                 Réduire -

    Non trouvé
    Désolé, mais vous recherchez quelque chose qui n'est pas ici.

Merci

Answer 1

J'ai eu des problèmes auparavant en essayant de mélanger différents types de valeurs dans animate. Vous pourriez essayer d'obtenir la hauteur de la fenêtre et de la convertir en ems pour voir si cela fonctionne mieux avec une animation en em-vers-em qu'en em-vers-pourcent. Cela peut ou non régler le problème pour vous, mais c'est mon avis.

Answer 2

Essayez les méthodes d'effet slideDown et slideUp, qui devraient faire exactement ce que vous recherchez.