动画jQuery的高度比例 [英] Animate jQuery height percentage

问题描述

当我试图动画的百分比，这不是动画，而是扩展到整个高度瞬间。我希望它扩大到100％，但顺利

When I'm trying to animate percentage, it's not animating, but expanding to whole height instantly. I want it to expand to 100%, but smoothly

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的code：

Jquery code:

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

    );
});

当我负载点击越多，它扩展到100％瞬间，并不顺利，但是当我点击它第二次，它降低大小为20像素的顺利进行。我试着看在Chrome的检查工具，扩大过程，我可以清楚地看到这一比例将平稳，但数量不是整数，和Chrome似乎并不承认它。我怎样才能解决这个问题？

When I click on load more, it expands to 100% instantly, not smoothly, but when I click on it second time, it decreases size to 20 px smoothly. I tried to watch expanding process in Chrome's inspector tool and I can clearly see that percentage is adding smoothly, but numbers aren't integers, and Chrome doesn't seem to recognize it. How can I solve this?

推荐答案

我想CSS百分比值是在父节点。

I think the CSS percentage value is upon the parent node.

所以如果你想使这个可能要添加DIV父节点并设置高度了，我采取的的jsfiddle

so if you want to make this possible you want to add div parent node and set the height off the parent node that i take an example in jsFiddle

这篇关于动画jQuery的高度比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！