Going through the jQuery source you start to learn how things are processed by the library. A few months ago I noticed that the .animate() method wasn't able to compute "auto" values for elements and animate accordingly. After Google-ing the issue I noticed that it's a big issue for some people. This past month I put together a fix that I hope to add to the core through a pull request later this month to rectify this issue.

For now, you can temporarily use the fix as my example below shows. The main idea is to clone the element and place it before itself while changing its CSS properties to "auto" and ultimately finding the "px" native value of said element. Take a look:

<iframe style="width: 100%; height: 550px; border:1px solid #ccc;" src="http://jsfiddle.net/darcyclarke/JNRpK/28/embedded/"></iframe>