jQuery动画按比例扩展

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

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

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

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

Answer 1

试试这个：

 
 #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），则从左到左动画 – （w1-w0）/ 2 ，从上到上 – （h1-h0）/ 2 。 请注意，这只适用于绝对或相对定位。