jQuery的.slideDown / Up()如何处理幻灯片到未知(自动)高度?

时间:2011-03-18 11:18:52

标签: jquery html css animation height

我想向下滑动(显示)最初有0px高度的DIV:

<div id="toslide" style="height:0px;overflow:hidden;"> ... various content </div>

然而,由于各种屏幕宽度,字体大小以及其他会影响内部布局并因此影响目标高度的因素,最终高度未知。

如果我必须手动完成,我会用visibility:hidden;显示它,测量高度,然后将animate显示到已知高度(但这也有缺点)。

我在jQuery的.slideDown()中得到了不同的结果 - 在它运行的文档中,但在这种特殊情况下它对我不起作用。

jQuery如何知道最终的高度?

编辑:一种解决方法是让另一个内部div height:auto;用于测量身高。

2 个答案:

答案 0 :(得分:0)

这是一个老问题。我原来正在寻找同样问题的答案,你的编辑正是我正在寻找的。

JSFiddle for all the goodies

$("a#moreRequests").on("click", function(){// click this and the div grows

//console.log("this hits");
var friends = $(".friendsDiv");
var divHeight = $(".auto").height();

if(friends.hasClass("grow")){// if the div has the class grow on it, then shrink
  friends.animate({
    height: "100px"
  },1000, function(){
    console.log("this is if it has the class .grow,");
  }).removeClass("grow");
} 
else{
  friends.animate({
    height: divHeight
  },1000, function(){
    console.log("this is if it doesn't has the class .grow div height: " + divHeight);
  }).addClass("grow");
}
return false;
});

希望能帮助任何有同样问题的人。

答案 1 :(得分:-1)

你应该得到其中元素的.height(),将它们相加并使div的高度变为高度:)

http://api.jquery.com/height/