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伸展到它的全高以显示所有元素..

Answer 1

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

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

检索相关的一个，并使用.height();进行设置。

Answer 2

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

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

修改

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

设置填充窗口高度的高度示例：http://jsfiddle.net/techfoobar/C37rs/1/

编辑＃2

动画显示自动高度：http://jsfiddle.net/techfoobar/psexn/3/

jQuery的animate函数不会自动设置为自动高度。实际上，它不会动画到动画之前无法确定的任何高度。

然而，我们可以做到这一点。但它涉及一个相当丑陋的黑客。黑客是隐藏div，将高度设置为自动，注意高度，恢复高度和可见性。获得目标高度后，为其设置动画。

Answer 3

Jquery的animate方法可以很好地处理百分比和像素。

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

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

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

<强>更新

当你为光学容器的动画制作动画时，你必须指定它应该扩展到什么高度。要做到这一点，你需要知道你想要的高度，无论是百分比还是像素。

如果您希望photocontainer能够保存可变数量的数据，则需要更改策略。将photocontainer定义为高度auto，然后在点击展开时，在photocontainer中添加新元素。 Photocontainer会自动扩展到合适的尺寸。

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

jquery .animate（）高度为auto

3 个答案: