嗨,我正在使用 Jquery 将 div 从设定高度设置为 100%,然后再次返回设定高度。这用于显示/隐藏比设置高度长的 WordPress 帖子中的文本( overflow hidden )。我无法将 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 和 grey_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 »'); ?>
<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; ?>
谢谢
最佳答案
我之前在尝试在 animate 中混合不同类型的值时遇到过问题。您可以尝试获取窗口高度并将其转换为 em,看看它是否更喜欢 em-to-em 动画而不是 em-to-percent。它可能会也可能不会为您解决问题,但这就是我的想法。
关于jquery - 使用 JQuery 将 div 动画设置为 100% 高度时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1128226/