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

Answer 2

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

那种事（对不起它的代码格式化）我确定你可以正确插入它。

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

2 个答案: