jQuery动画按比例扩展

Question

我现在遇到的问题是如何在jQuery中动画函数按比例扩展。通常情况下，它只是像展开到底部或向右展开一样展开。

我想要的是通过使用动画来按比例左右 - 上 - 下扩展。

以下是我的编码。我上面所说的，它只是扩展到底部。

$(document).ready(function() {
    var theFrame = $("#FrmPatient", parent.document.body);
    theFrame.animate({width: 650, height: 485}, 1000);
});         

Answer 1

试试这个：

<div id="frame"></div>

#frame {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    width: 200px;
    height: 200px;
    background-color: #999;
}

$(function() {
    var w = 400, h = 400;
    $("#frame").animate({
        width: w,
        height: w,
        marginLeft: -w/2,
        marginTop: -h/2
    }, 1000);
});

http://jsfiddle.net/GVj83/

Answer 2

您还需要为左和顶部属性设置动画。如果框的原始宽度和高度为（w0，h0）且展开的宽度和高度为（w1，h1），则将左动画到 left-（w1-w0）/ 2 ， top 到 top-（h1-h0）/ 2 。请注意，这只适用于绝对或相对定位。