从自动起始高度到未知高度的动画？

Question

如果有必要的话，我可以尝试将它放在一个小提琴中，这只是目前相当复杂的代码。 这是我的问题： 我有一个由于一些动态图像和文本内容而调整大小的子div，以及一个容器父级，它为整个事物提供了一个漂亮的边框。父级具有自动高度（或没有高度？），因此它与子高度一起流动。问题是，当我更改子高度时，我将内容淡出然后重新进入，因此有效高度为12px（某些边界正在进行）。父级调整为12，然后当子级内容淡入时，父级将转到正确的位置。它看起来很不稳定，因为你看到这个过程在100ms左右的时间内展开。有没有办法动画这个过程？我想理想我正在寻找类似

的东西

content.startAnimation和endAnimation，您不必指定值。

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中，我将高度作为.2s过渡，因此可以无缝调整。 希望这有助于其他人在将来遇到同样的问题。