javascript - 动画 jQuery 高度百分比

Question

当我尝试设置百分比动画时，它不是动画，而是立即扩展到整个高度。我想让它扩展到 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>

J查询代码:

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).animate({
                height: "20px",
            }, 1000 );
        },
        function() {
            $( "#block-views" ).animate({
                height: "100%",
            }, 1000 );
        }

    );
});

当我点击加载更多时，它立即扩大到 100%，不是很顺利，但是当我第二次点击它时，它会顺利地缩小到 20 像素。我试着在 Chrome 的检查器工具中观察扩展过程，我可以清楚地看到百分比正在平滑地增加，但数字不是整数，而且 Chrome 似乎无法识别它。我该如何解决这个问题？

Answer 1

我认为 CSS 百分比值在父节点上。

所以如果你想让这成为可能，你想要添加 div 父节点并设置父节点的高度，我在 jsFiddle 中举了一个例子。