jquery - animate from an auto start height to an unknown height?

Question

I can try to throw this in a fiddle if necessary, it's just fairly convoluted code at the moment. Here is my problem: I have a child div that gets resized because of some dynamic image and text content, and a container parent that gives a nice border around the whole thing. The parent has an auto height (or no height?) so it flows with the child height. The problem is that when I change the child height, I am fading the content out and then back in, so the effective height is 12px (some borders going on). The parent resizes to 12, and then when the child content fades back in, the parent goes to the correct position. It just looks choppy, because you see this process unfolding in the span of 100ms or so. Is there any way to animate this process? I guess ideally I'm looking for something like

content.startAnimation and endAnimation, in which you don't have to specify values.

Answer 1

所以我想出了一个解决方案。基本上，由于我的#content div 是浮动的，我可以在其中放置一个#ghostWrapper div，它的高度可能比其父级（#content）更大。我的#ghostWrapper 当然是不可见的。我从这个 onClick 开始：

// set content height on load
var contentHeight = $("#content").css("height");
$("#content").css("height", contentHeight);

然后，一旦#ghostWrapper 中的内容自动调整了它的高度，我将#content 的高度设置为等于#ghostWrapper

// get ghostWrapper height and set content to it
var ghostHeight = $("#ghostWrapper").css("height");
$("#content").css("height", ghostHeight);

在 CSS 中，我将高度作为 0.2 秒的过渡，因此可以无缝调整。希望这可以帮助其他人在未来遇到同样的问题。