Problem using JQuery to animate div to 100% height

Question

Hi I'm using Jquery to animate a div from a set height to 100% and back to a set height again. This is used to show/hide text from a wordpress post that is longer then the set height (overflow is hidden). I'm not able to animate the div from the set height to 100% -- instead the div jumps to 100% of the height. It does animate back to it's set size smoothly. I can't fix a height for it to animate to because the posts will always have a different height according to how much has been written.

Here's the JQuery code:

$(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"});

});         
});

The CSS:

.entry {

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

Basically the .entry div is wrapped in a container that positions the post heading, post and a post divider. The animation works if I plug in a set value but no luck getting the 100% to work. Any ideas?

Here's the full jquery (the yellow_read, invistext and gray_read are text that when clicked trigger the animation and change from expand to collapse.

$(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"); 
});     

});

Here's the full css

  #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; /*controls the post body when WP sIFR is off*/
    line-height:1.8em; /*controls the post body when WP sIFR is off*/
    }

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

and the html:

<div id="content">



<?php if (have_posts()) : ?>

 <?php while (have_posts()) : the_post(); ?>

  <div class="post" id="post-<?php the_ID(); ?>">

   <div class="postHeading">

    <div class="postTitle">
     <h2><?php the_title(); ?></h2>
    </div><!-- post title ends -->
   </div><!-- post heading ends -->


<div class="entry">


    <?php the_content('Read the rest of this entry &raquo;'); ?>

<div class="read_more">
    <span class="gray_read">Read </span>
     <span class="yellow_read"> More </span>
      <span class="gray_read"> +</span>
       <span class="invistext"> Collapse -</span>
</div>

<?php endwhile; ?>

<?php else : ?>

 <h2 class="center">Not Found</h2>
 <p class="center">Sorry, but you are looking for something that isn't here.</p>
 <?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

Thank you

Answer 1

Try the slideDown and slideUp effect methods, which should do exactly what you're looking for.

Answer 2

I've had problems before with trying to mix different types of values in animate. You might try getting the window height and converting it to ems to see if it likes an em-to-em animation better than em-to-percent. It may or may not fix it for you, but that's my thought.

Answer 3

(This should be a comment to the above answer, but I don't have reputation enough yet)

Jeremy: the jQuery .height() method gives you the height of an element. Just run this on the parent of the element you want to set the height of.

Something like...

element.parent().height()

... should give you a height corresponding to 100%.