JQuery：动画子div和父div答案

【问题标题】：JQuery: animate child div together with parent divJQuery：动画子div和父div
【发布时间】：2014-02-12 16:48:47
【问题描述】：

我是 JQuery 动画的新手，这似乎是一个相对简单的问题，但我已经做了一些挖掘，在其他地方找不到任何解决方案。

我有一个父 div，我想将其设置为某个百分比高度，例如

$('#parent').animate({
    height: "75%"
});

有一个子 div，我希望它是父级高度的 100%。

对我来说，同时为两者设置动画的最佳方式是什么，这样无论我决定将父级设置为 50%、30%、22.937% 的任何高度，孩子都保持在父级高度的 100%，但会增长/与父母一起缩小？

我想我可以放弃百分比，计算出容器高度的像素高度，然后将父子元素设置为相同的像素值，但有没有更简单的方法？

谢谢，亚当

编辑

这个问题似乎与子 div 是否位于父级的维度内有关。维度之外的子 div 的任何部分都没有动画，它们只是在动画结束后“弹出”。

我猜 HTML 可能应该被重组，所以父代是兄弟姐妹，这可能是唯一的答案（除了我所说的关于计算像素的内容）。我想我只是希望有一些我不知道的 JQuery 动画魔法。

【问题讨论】：

为什么定位：绝对；对于#child.check 这个jsfiddle.net/azw2F/3 这是你想要的结果。
不幸的是，我仍然需要 position:absolute 的孩子，因为我需要改变它的“左”属性。不过，这很好地说明了我想要的结果，谢谢:)
@mani 你应该把它作为一个答案，以便它可以被接受
left 仍然是非绝对定位对象的有效属性。 According to the W3，左边指定"...specifies how far positioned box's left margin edge is."，有效地给出偏移的行为。如果您相对定位一个对象，左侧将使其偏离其自然位置，同时（我相信）将其流盒保持在原位。不知道有没有帮助，只是分享知识！
有趣。我认为（从摆弄）如果孩子在父母的宽度内，它会起作用：@ 987654326@，但是当它的一部分超出父母的宽度时，这些部分不会用它制作动画，而只是刷新到正确的末尾高度：jsfiddle.net/azw2F/10

【解决方案1】：

最好的解决方案是：http://jsfiddle.net/azw2F/11/

当子 div 部分位于父 div 之外，即子 div 溢出父 div 时，将 overflow:visible!important; 添加到父 div。想想就觉得很烦人！

【讨论】：

【解决方案2】：

I have two solution for your problem

第一个with position:absolute在孩子身上

第二个without position:absolute关于我之前发布的孩子

【讨论】：