jQuery：动画宽度/高度，但保持居中

Posted 2023-05-08

【中文标题】jQuery：动画宽度/高度，但保持居中

【英文标题】：jQuery: Animating width/height, but Stay Centered

【发布时间】：2011-07-08 03:20:14

【问题描述】：

我在页面上有一个元素，我已经水平和垂直居中（这是一个 jQuery UI 模态对话框），并且想使用 .animate() 调整它的大小，如下所示：

<div id="element" style="width: 100px; height: 100px;">
    Hi Stack Overflow!
</div>

<script type="text/javascript">
    $('#element').animate( height: "200px" );
</script>

这很好，除了元素只会向下增长。我想要做的是让元素在两个方向上垂直增长（在这种情况下，每个方向上 50px），所以它保持居中。有没有办法可以做到？

【参考方案1】：

Live Demo

var growEl = $("#grow"),
    curHeight = $("#grow").height(),
    curTop = growEl.offset().top,
    newHeight = 200,
    newMargin = curTop -(newHeight -curHeight)/2;

if(newMargin < 0)
 newMargin = 0;   


$("#grow").animate(height:newHeight+"px", marginTop:newMargin + 'px');

计算边距的公式

NewTopMargin = CurrentMargin-(NewHeight-OldHeight)/2

感谢@bobsoap 提醒我使用offset.top

【讨论】：

我一开始也是这样尝试的，但是我发现了一个缺陷。如果浏览器窗口很小，新的上边距可能是负数。在这种情况下，元素应该尽可能地增长（有边距），然后一直向下。我希望不会有很多数学或复杂的动画计算。我想保持这件事的速度。

@mellowsoon 你可以使用offset 获取元素的位置，然后使用offset.top 访问它。你无法绕过做一些数学运算，但无论如何它都不是“复杂的动画计算”。你首先做一些基本的数学，JS 很快，然后你做一个 animate() 函数，你已经在做。

再次更新，使用 offset().top。

真棒的答案，我们怎样才能让文本在整个时间垂直对齐中心，同时框展开？

【参考方案2】：

margin-top: -50px, height: 50px;

那种东西（抱歉它没有格式化代码）我相信你可以正确插入它。