我一直在尝试新的webkit CSS3动画技术。我制作了一个应该可以工作的可折叠面板,但奇怪的是跳跃和静止。
CSS
.reveiws .content {
font-size:12px;
line-height:18px;
height:72px;
overflow:hidden;
float:left;
vertical-align:top;
max-width:560px;
-webkit-transition: height 800ms;
-moz-transition: height 800ms;
}
.reveiws .contentfull {
height:100%;
-webkit-transition: height 800ms;
-moz-transition: height 800ms;
}
HTML
<div id="pan<?php the_ID();?>" class="content"><?php the_content();?></div>
<div class="author" style="text-align:left; padding-right:10px;">
<a href="#" onclick="$('#pan<?php the_ID();?>').addClass('contentfull'); $(this).hide(); $(this).next().show(); return false">Read More »</a>
<a href="#" onclick="$('#pan<?php the_ID();?>').removeClass('contentfull'); $('#pan<?php the_ID();?>').addClass('content'); $(this).hide(); $(this).prev().show(); return false" style="display:none;">« Close panel</a>
这是一个FIDDLE http://jsfiddle.net/L6Jwa/1/
答案 0 :(得分:0)
我认为你的问题是你在一个班级的高度为72px而在另一个班级的高度为100%。改为例如二等400px,它工作正常。
我不确定在这种情况下你可以使用%unit。
ķ