动画jQuery高度百分比

当我试图制作百分比动画时，它不是动画，而是立即扩展到整个高度。 我希望它扩展到100％，但顺利

CSS：

#block-views{ overflow:hidden; height:20px; } 

HTML：

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 
 Load more 

Jquery代码：

 $(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中举例说明

Answer 2

我建议来自JQuery论坛的这篇文章将适合您的要求。

http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div

Answer 3

我很确定这不合法。 你不能混合px和百分比 – 它无法在它们之间进行转换。

Answer 4

我想到了两种方式。

第一种方式是你的方式，我在这里找到一个逗号,错误：并且需要使用position:aboslute; css属性。 最后一件事改变你的主要响应函数顺序。

这是工作jsFiddle。

 $(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 ); } ); });​ 

结构就像这样= .animate（properties [，duration] [，easing] [，complete]）

多个动画函数应该是这样的： .animate({'height':'20px','width':'20px'},1000);

————————————————– ———-

第二种方式是我的方式，你可以为每次点击添加+ 20px高度：

这是jsFiddle

 $(function() { $( ".loadmore" ).click(function() { $("#block-views").animate({'height':'+=20px'},1000); }); });​ 

Answer 5

我找到了解决这个问题的方法（抱歉迟到了）。 你需要做的是在＃block-views元素中创建额外的包装器，它将具有实际的高度信息：

 
 //height is 20px now 
 //has its full height in px 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 
  

现在在javascript中你可以将.wrapper height传递给animate（）函数：

 $('#block-news').stop().animate({'height': $('#block-news .wrapper').height()}, 1000); 

为我工作。 要切换，您可以添加新变量并存储初始高度（20px）。