jQuery动画按比例扩展

Question

I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.

What I want is to expand proportionally left-right-top-bottom by using animate.

Following is my coding. What I said above, it expand to bottom only.

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

Answer 1

Try this:

<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

You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2 , and top to top-(h1-h0)/2 . Note that would only work with absolute or relative positioning.