jQuery animer développer proportionnellement

Question

Je suis maintenant en difficulté sur la façon de animer fonction dans jQuery pour développer proportionnellement. Normalement, il se dilate unilatéralement seulement comme étendre vers le bas ou étendre vers la droite.

Ce que je veux, c'est étendre proportionnellement gauche-droite-haut-bas en utilisant animer.

Après est mon codage. Ce que j'ai dit plus haut, il ne s'étend qu'au fond.

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

Answer 1

Essayez ceci:

<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

Vous aurez besoin d'animer le gauche et top propriétés ainsi. Si la largeur de l'original et la hauteur de la boîte sont (w0, h0) et les étendues sont (w1, h1), animé gauche-gauche (w1-W0)/2 et haut-haut - (h1-h0)/2. Notez que cela ne fonctionnerait qu'avec un positionnement absolu ou relatif.