jQuery在动画后更新元素的css高度答案

【问题标题】：jQuery to update css height of element after animatingjQuery在动画后更新元素的css高度
【发布时间】：2013-02-19 19:31:42
【问题描述】：

这是我正在制作的小提琴：http://jsfiddle.net/fFYqF/

基本上它是h1 上方的h2，它们之间有一些隐藏的段落。这一切都包含在一个 div 中，我试图使其在视觉上居中（在屏幕上水平和垂直。我已经在容器 div 上使用了这个 css 以使其在页面上居中：

div#holder {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height:40%;
    width:60%;
    min-width:300px;
}

为此，必须指定 div 的宽度和高度。我有两个问题...首先，我不知道 div 的高度，所以我尝试使用 jQuery 动态应用它：

var h = $('#holder').height();
$('#main').css('height', h + 'px');

其次，我还有一点 jQuery 来为打开的文本段落设置动画。这会改变持有人 div 的高度，从而使之前计算的高度不正确，并且 div 不再垂直居中。

有没有办法让持有者 div 始终位于页面中心？ IE。打开时它应该向上移动。

请参阅上面的小提琴以了解我的意思。谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我更新了 branch of your fiddle 以混合使用 .animate() 与元素的高度和顶部位置，使其看起来像是在打开。

【讨论】：

结果看起来不错，但是在更改 top 属性时会出现问题。即top 没有被动画化。
啊，它似乎在 chrome 中运行良好，但在 Firefox 中却不是这样...... top 属性动画似乎被某些东西打断了

【解决方案2】：

您是否尝试过 .animate 方法？我还没有像您描述的那样在垂直居中的情况下对此进行测试，但是当我将其他元素带入视野时，我已经使用这种方法来增加容器的高度。

$('#main').animate({height: '+='h }, 'slow');

【讨论】：

是的，实际上在我的小提琴中使用了 animate 方法。不过，这不会将 CSS 高度应用于父元素，这正是我想要的。
您将哪个元素称为父元素？主要的？还是高于主线？