Проблема с использованием JQuery для анимации div до 100% высоты

Question

Привет Я использую JQuery для анимации div с высоты набора до 100% и обратно до заданной высоты. Это используется для отображения/скрытия текста из сообщения Wordpress, которое длиннее заданной высоты (переполнение скрыто). Я не могу оживить div от установленной высоты до 100%, вместо этого div переходит на 100% высоты. Он плавно возвращается к установленному размеру. Я не могу установить высоту для анимации, потому что сообщения всегда будут иметь разную высоту в зависимости от того, сколько было написано.

Вот код 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"}); 

});   
}); 

CSS-:

.entry { 

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

В основном .entry ДИВ заворачивают в контейнер, который позиционирует пост заголовок, пост и пост делителя. Анимация работает, если я подключаю установленное значение, но вам не удастся заставить 100% работать. Есть идеи?

Вот полный JQuery (yellow_read, invistext и gray_read являются текст, который при нажатии на спусковой крючок анимации и переход от расширения к коллапсу.

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

}); 

Вот полный 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; 
        } 

и 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; ?> 

Спасибо

Answer 1

Попробуйте методы эффекта slideDown и slideUp, которые должны делать именно то, что вы ищете.

Answer 2

У меня были проблемы, прежде чем пытаться смешивать различные типы значений в анимации. Вы можете попытаться получить высоту окна и преобразовать его в ems, чтобы увидеть, нравится ли ему анимация em-to-em лучше, чем em-to-percent. Это может или не может исправить это для вас, но это моя мысль.