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

Question

我在页面上有一个元素，我已经水平和垂直居中（它是一个 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），以便它保持居中。有办法可以做到吗？

Answer 1

现场演示

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

Answer 2

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

类似的事情（抱歉它没有格式化代码）我确信你可以正确插入它。