使用JQuery将div动画到100％高度时出现问题 [英] Problem using JQuery to animate div to 100% height
问题描述
我正在使用Jquery将div的动画从设置的高度设置为100％，然后再次返回到设置的高度.它用于显示/隐藏来自wordpress帖子的文本，该文本长于设置的高度(隐藏溢出).我无法将div从设置的高度设置为100％的动画-而是div跳到了高度的100％.它会平滑地恢复为设置大小的动画.我无法确定动画的高度，因为帖子根据写的数量总是有不同的高度.
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.
这是JQuery代码:
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"});
});
});
CSS:
.entry {
float:left;
position:relative;
width:870px;
height:5.9em;
overflow:hidden;
padding: 0px 10px 10px 10px;
display:block;
}
.entry div基本上包装在一个容器中，该容器放置了邮政标题，邮政和邮政分隔符.如果我插入一个设定值，但没有运气使100％正常工作，动画将起作用.有什么想法吗?
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?
这是完整的jquery(yellow_read，invistext和grey_read是单击时触发动画并从展开变为折叠的文本.
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");
});
});
这是完整的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 »'); ?>
<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; ?>
谢谢
推荐答案
在尝试混合动画中的不同类型的值之前，我遇到了问题.您可以尝试获取窗口高度并将其转换为ems，以查看它是否更喜欢em-em动画而不是em-per-percent.它可能为您解决，也可能无法解决，但这是我的想法.
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.
这篇关于使用JQuery将div动画到100％高度时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
