javascript 动画jQuery高度百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11792302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate jQuery height percentage
提问by George
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
当我尝试动画百分比时，它不是动画，而是立即扩展到整个高度。我希望它扩展到 100%，但很顺利
CSS:
CSS：
#block-views{
overflow:hidden;
height:20px;
}
HTML:
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:
查询代码：
$(function() {
$( ".loadmore" ).toggle(
function() {
$( "#block-views" ).animate({
height: "20px",
}, 1000 );
},
function() {
$( "#block-views" ).animate({
height: "100%",
}, 1000 );
}
);
});
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?
当我点击更多加载时，它会立即扩展到 100%，不是很流畅，但是当我第二次点击它时，它会平滑地将大小减小到 20 像素。我试图在 Chrome 的检查器工具中观察扩展过程，我可以清楚地看到百分比正在顺利增加，但数字不是整数，Chrome 似乎无法识别它。我该如何解决这个问题？
采纳答案by whytobe
回答by Артур Пипченко
I've found a solution for this problem (sorry for being late). What you need to do is to make additional wrapper inside #block-viewselement, which will have actual height information:
我已经找到了解决这个问题的方法（抱歉迟到了）。您需要做的是在#block-views元素中制作额外的包装器，它将具有实际的高度信息：
<div id="block-views"> //height is 20px now
<div class="wrapper"> //has its full height in px
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
</div>
</div>
Now in javascript you can pass .wrapperheight to animate() function:
现在在 javascript 中，您可以将.wrapper高度传递给 animate() 函数：
$('#block-news').stop().animate({'height': $('#block-news .wrapper').height()}, 1000);
Worked for me. For toggle you can add new variable and store initial height (20px) there.
对我来说有效。对于切换，您可以添加新变量并在那里存储初始高度（20 像素）。
回答by Ryan McDonough
I would suggest this post from the JQuery forums would be suitable to your requirements.
我建议来自 JQuery 论坛的这篇文章适合您的要求。
http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div
http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div
回答by Ariel
I'm pretty sure that's not legal. You can't mix px and percent - it has no way to convert between them.
我很确定这不合法。您不能混合使用 px 和百分比 - 它无法在它们之间进行转换。
回答by Barlas Apaydin
There are two ways come to my mind.
我想到了两种方法。
First way is your way, i find a comma ,mistake here:and need to use position:aboslute;css property. and last thing change your main response functions order.
第一种方式是你的方式，我在这里发现一个逗号,错误：并且需要使用position:aboslute;css 属性。最后一件事是更改您的主要响应功能顺序。
$(function() {
$( ".loadmore" ).toggle(
function() {
$( "#block-views" ).stop().animate({
height: "20px"//if you wont use another animate property; dont use comma here
}, 1000 );
},
function() {
$( "#block-views" ).stop().animate({
height: "100%"
}, 1000 );
}
);
});?
Structure is like this = .animate( properties [, duration] [, easing] [, complete] )
结构是这样的 = .animate( properties [, duration] [, easing] [, complete] )
multiple animate function should be like this: .animate({'height':'20px','width':'20px'},1000);
多个动画功能应该是这样的： .animate({'height':'20px','width':'20px'},1000);
------------------------------------------------------------
-------------------------------------------------- ----------
Second way is my way, you can add +20px height for every click:
第二种方式是我的方式，您可以为每次点击添加 +20px 高度：
$(function() {
$( ".loadmore" ).click(function() {
$("#block-views").animate({'height':'+=20px'},1000);
});
});?
