我是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伸展到它的全高以显示所有元素..
答案 0 :(得分:2)
您需要使用像素,而不是百分比。
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
检索相关的一个,并使用.height();
进行设置。
答案 1 :(得分: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,将高度设置为自动,注意高度,恢复高度和可见性。获得目标高度后,为其设置动画。
答案 2 :(得分:1)
Jquery的animate
方法可以很好地处理百分比和像素。
以下是一个示例:http://jsfiddle.net/KH8Gf/11/
这让我相信问题是你没有为div photocontainer
正确定义父级。当您以百分比表示高度时,它表示父项的x%。如果未定义父级,则不能使用百分比。
如果可能,请发布您的HTML标记和CSS。
<强>更新强>
当你为光学容器的动画制作动画时,你必须指定它应该扩展到什么高度。要做到这一点,你需要知道你想要的高度,无论是百分比还是像素。
如果您希望photocontainer
能够保存可变数量的数据,则需要更改策略。将photocontainer
定义为高度auto
,然后在点击展开时,在photocontainer
中添加新元素。 Photocontainer
会自动扩展到合适的尺寸。