使用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>

Jquery 代码：

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

    );
});

当我点击“加载更多”时，它会瞬间扩展到100％，而不是平滑地扩展。但是当我第二次点击它时，它会平滑地缩小到20个像素。我尝试使用Chrome的检查工具观察扩展过程，我可以清楚地看到百分比在平稳增加，但数字不是整数，Chrome似乎无法识别它。我该如何解决这个问题？

- George

---

尝试将 height: "100%" 改为 height: $(this).parent().height()。因为 jQuery 在比较百分比和像素时会出现问题，所以你应该将两个计算值都转换成像素。 - Tim S.

Answer 1

我认为CSS百分比值是基于父节点的。

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

- whytobe

---

啊啊啊。在jQuery v1.11中不起作用。应用切换的方式是不同的。 - Christophe

Answer 2

我想到了两种方法。

第一种方法是你的方法，我发现这里有一个逗号,错误：需要使用position: absolute; 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( 属性 [, 持续时间] [, 缓动函数] [, 完成时回调函数] )

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

------------------------------------------------------------

第二种方法是我的方法，您可以为每次单击添加+20px的高度：

这里是 jsFiddle

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

- Barlas Apaydin

Answer 3

我建议您阅读 JQuery 论坛上的这篇帖子，它可能符合您的要求。

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

- Ryan McDonough

Answer 4

我非常确定那是不合法的。你不能混合使用像素和百分比 - 它们之间没有转换的方式。

- Ariel

---

谢谢显而易见的队长。我很确定SA是问题和答案 - 我缺少答案。 - Tim S.

Answer 5

我已经找到了这个问题的解决方案（抱歉回复晚了）。你需要在#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>

现在在JavaScript中，您可以将.wrapper的高度传递给animate()函数：

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

对我有用。对于切换，您可以添加新变量并将初始高度（20px）存储在其中。

- Артур Пипченко