当我尝试对百分比进行动画时,它并没有动画效果,而是立即扩展到整个高度。我想要它平滑地扩展到100%。
CSS:
#block-views{
overflow:hidden;
height:20px;
}
HTML:
<div id="block-views">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
</div>
<a href="#" class="loadmore">Load more</a>
Jquery 代码:
$(function() {
$( ".loadmore" ).toggle(
function() {
$( "#block-views" ).animate({
height: "20px",
}, 1000 );
},
function() {
$( "#block-views" ).animate({
height: "100%",
}, 1000 );
}
);
});
当我点击“加载更多”时,它会瞬间扩展到100%,而不是平滑地扩展。但是当我第二次点击它时,它会平滑地缩小到20个像素。我尝试使用Chrome的检查工具观察扩展过程,我可以清楚地看到百分比在平稳增加,但数字不是整数,Chrome似乎无法识别它。我该如何解决这个问题?
height: "100%"
改为height: $(this).parent().height()
。因为 jQuery 在比较百分比和像素时会出现问题,所以你应该将两个计算值都转换成像素。 - Tim S.