Problem bei der Verwendung von JQuery, um div auf 100% Höhe zu animieren

Question

Hallo, ich benutze Jquery, um ein div von einer eingestellten Höhe auf 100% und wieder auf eine eingestellte Höhe zu animieren. Dies wird verwendet, um Text aus einem Wordpress-Post anzuzeigen/auszublenden, der länger als die eingestellte Höhe ist (Überlauf ist ausgeblendet). Ich kann das div nicht von der eingestellten Höhe auf 100% animieren - stattdessen springt das div auf 100% der Höhe. Es animiert zurück zur eingestellten Größe. Ich kann keine Höhe für die Animation festlegen, da die Beiträge immer eine andere Höhe haben, je nachdem, wie viel geschrieben wurde.

Hier ist der 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"}); 

});   
}); 

Die CSS:

.entry { 

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

Grundsätzlich ist die .entry div in einem Behälter gewickelt, der die Post Überschrift, Post und ein Postteiler positioniert. Die Animation funktioniert, wenn ich einen festgelegten Wert einstelle, aber kein Glück, dass die 100% funktionieren. Irgendwelche Ideen?

Hier ist die volle jquery (die yellow_read, invistext und gray_read sind Text, wenn der Auslöser der Animation und Änderung geklickt Einsturz von erweitern.

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

}); 

Hier ist die vollständige 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; 
        } 

und die 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; ?> 

Danke

Answer 1

Versuchen Sie, die slideDown und slideUp Effekt Methoden, die genau tun sollten, was Sie suchen.

Answer 2

Ich hatte Probleme mit dem Versuch, verschiedene Arten von Werten zu animieren. Sie könnten versuchen, die Fensterhöhe zu ermitteln und sie in ems umzuwandeln, um zu sehen, ob eine em-to-em-Animation besser ist als em-to-percent. Es kann oder kann es nicht für dich reparieren, aber das ist mein Gedanke.