使用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 div包含在一個容器中，該容器定位帖子標題，帖子和分隔符。 如果我插入一個設定值但沒有運氣讓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

我之前嘗試在動畫中混合不同類型的值時遇到了問題。 您可以嘗試獲取窗口高度並將其轉換為ems，以查看它是否比em-to-percent更喜歡em-to-em動畫。 它可能會或可能不會為您解決，但這是我的想法。

Answer 2

嘗試使用slideDown和slideUp效果方法，它們應該完全符合您的要求。