使用JQuery将div设置为100％高度的问题
嗨，我正在使用Jquery将div从设定高度设置为100％并再次返回到设定高度。 这用于显示/隐藏wordpresspost中的文本，该文本比设置高度更长（隐藏溢出）。 我无法将div从设置高度设置为100％ – 而div会跳到100％的高度。 它可以平滑地回复它的设置大小。 我无法确定它的动画高度，因为根据已写入的数量，post总是会有不同的高度。
这是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包含在一个容器中，用于定位post标题，post和post分隔符。 如果我插入一个设定值，动画就可以工作，但没有运气让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 pa:hover, .post pa: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 aa:link, .entry pa: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 class="post" id="post-">
Read More + Collapse -
Not Found
Sorry, but you are looking for something that isn't here.
谢谢
在尝试在动画中混合使用不同类型的值之前，我遇到了一些问题。 您可以尝试获取窗口高度并将其转换为ems，以查看它是否比em-to-percent更喜欢em-to-em动画。 它可能会或可能不会为您解决，但这是我的想法。
尝试使用slideDown和slideUp效果方法，这些方法应该完全符合您的要求。