javascript - jquery .animate() 自动高度

Question

我是 jquery 的新手。我必须将 div 设置为一定高度的动画。再次在下一次单击时，我需要将其设置为自动高度。只有当我提供以 px 为单位的高度时，我才能制作动画。这是我的代码。任何人都可以建议如何在页面加载时找到 div 的高度。

 $("#photobutton").click(function(){
                          var $text = $("#photobutton").text();

                         if($text == "hide photos") 
                         {
                            $("#photocontainer").animate({height: '144px'}, 1000);
                            $("#photobutton").text("more photos");
                         }
                         else if($text == "more photos")
                         {
                            $("#photocontainer").animate({height: '100%'}, 1000);

                            $("#photobutton").text("hide photos");
                         }

                      });

在 if 条件下我希望 div 折叠到 height144px.. 在 else 条件下我希望 div 拉伸(stretch)到它的全高以显示所有元素..

Answer 1

在您的第二个 animate() 调用中，假设您希望此 div 填充其父级的高度，请使用:

$("#photocontainer").animate({height: $("#photocontainer").parent().height()+'px'}, 1000);

编辑

1. 动画高度填充父级高度的示例:http://jsfiddle.net/techfoobar/HXjfe/

2. 动画高度填充窗口高度的示例:http://jsfiddle.net/techfoobar/C37rs/1/

编辑#2

动画到自动高度:http://jsfiddle.net/techfoobar/psexn/3/

jQuery 的 animate 函数本身不会根据自动高度设置动画。事实上，它不会动画到任何无法在动画之前确定的高度。

但是我们可以让它去做。但它涉及一个相当丑陋的黑客攻击。 hack 是隐藏 div，将高度设置为自动，记下高度，恢复高度和可见性。获得目标高度后，将其设置为动画。