javascript - 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

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