[Resolvido] Jquery animate

[Leandro D. 0]

Olá pessoal! Estou usando o jquery para animar uma div, mas não estou conseguindo fazer do jeito que eu gostaria. Tenho a seguinte div:

<div id="cadastra_base" style="z-index:4; position:absolute; background: #ffffff; height: 5; width: 0; left:50%; top:50%; margin-top:-150px; margin-left:-350px;">
</div>

Utilizo o seguinte código para animar:

$(document).ready(function() {
  $("#cadastra_base").animate({width: "700px"}, 1500)
  .animate({height: "300px"}, 1500);
  });
});

Com o código acima ele aumenta o width a partir do canto esquerdo com sentido para direita e depois aumenta o height com sentido para baixo. Eu queria fazer com que o width animasse do centro e aumentasse para os dois lados ao mesmo tempo e depois fizesse o mesmo com o height. Veja a imagem para entender melhor.

Lembrando que gostaria de manter a div sempre no centro caso o navegador seja redimensionado, por isso utilizo as margens negativas. Será que alguém pode me dar uma ajuda na parte da animação? Desde já agradeço!

[Leandro D. 0]

Galera, encontrei a solução. O negócio é tirar as margens negativas do style e animar as margens na função animate(). Fica assim a div:

<div id="cadastra_base" style="z-index:4; position:absolute; background: #ffffff; height: 5; left:50%; top:50%;">
</div>

Na div você deixa só a porcentagem de deslocamento do left e top. O código jquery fica assim:

$(document).ready(function() {
  $("#cadastra_base").animate({width: "700px", marginLeft: "-350px"}, 1500)
  .animate({height: "300px", marginTop: "-150px"}, 1500);
  });
});

Desta forma acontece do jeito que eu queria, a width aumenta a partir do centro para os dois lados e depois a height aumenta para cima e para baixo até ficar na medida estipulada. Espero que isto seja de utilidade para os demais usuários.