jQuery .animate（）高度自动

Question

我是jquery的新手。我必须将div动画到一定高度。然后再次单击，我需要将其动画到height自动。 我只有在以px为单位提供高度时才能设置动画。这是我的代码。any1可以建议如何在页面加载时查找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拉伸到其全高以显示所有元素。

Answer 1

您将要使用像素而不是百分比。

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

.height();相关的，并使用.height(); 设置它。

Answer 2

在第二个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的动画功能本身不会动画为自动高度。 实际上，它不会将动画设置为动画之前无法确定的任何高度。

但是，我们可以做到这一点。 但这涉及一个相当丑陋的hack。 技巧是隐藏div，将height设置为auto，记下高度，还原高度和可见性。 确定目标高度后，对其进行动画处理。

Answer 3

jQuery的animate方法可以很好地与百分比和像素一起使用。

这是一个示例： http : //jsfiddle.net/KH8Gf/11/

这使我相信问题是您没有正确地为div photocontainer定义父级。 当用百分比表示高度时，表示父级的x％。 如果未定义父级，则它将无法使用百分比。

如果可能，发布您的HTML标记和CSS。

UPDATE

在为光电容器的扩展动画时，必须指定其应扩展到的高度。 为此，您需要知道所需的高度，以百分比或像素为单位。

如果您希望照片photocontainer能够保存可变数量的数据，则需要更改策略。 将photocontainer定义为具有高度auto ，然后单击“扩展”，然后在photocontainer添加新元素。 Photocontainer将自动扩展到适当的尺寸。

参见示例： http : //jsfiddle.net/KH8Gf/21/