[jQuery] How to animate a div's position

[Wayne]

Hi,

I have a div that is about half way down a page between some content.
It displays 3 fields of a form. I have a "add more info" link, which
when click expands the form to cover the page.
This works great in FF, the div expands smoothly upwards to the top of
the page, outward right out to the edge of the page, and down to the
bottom.

However in IE and safari, the div jumps to the top of the page and
then expands out right and downward. I'm trying to get it to act the
same as FF.


My div:
<div id="formToShow" style="border:1px solid red;width:500px;z-index:
30;background-color:#FFF;">
    <input type="text" value="addddd"/><br/>
    <input type="text" value="addddd"/><br/>
    <input type="text" value="addddd"/><br/>

    <input type="submit"/>
    <a href="#" id="moreinfo"> add more info</a>
  ....more fields....
</div>

script:
$('#moreinfo').click(function() {
   $('#formToShow').css("position","absolute");
   $('#formToShow').animate( {
       width: "100%",
       height: "100%",
       top: "0",
       left: "0",
       padding: "50pt"

  }, 2000);
});

Any ideas how I could get this to work, I've tried various combinates
with no luck. I'm completly new to jquery so if you can help or have
any pointers I would really appreciate it.
many thanks
Wayne