jQuery Sliding Left/Right Content Panels

Question

I'm trying to build a similar effect as seen on the MediaFire signup page. When you click the "try it" button the whole form div shrinks in height and the registration form slides in from the right. Then on that new form you can click "back" to slide back to the table display.

I am sure this can be done by including the jQuery UI library but I'd love to do this with just regular jQuery. Is there any solid solution I could follow? Not even necessarily a plugin but something that could use jQuery without requiring the UI library.

Answer 1

I developed this website http://www.ladehoffcondominios.com.br/#home, you can look in the source code of the ajax.js and the gs.page.js.

It's a little confuse, but the idea is work with the animate() function changing the margin-left/right of the content div.

If you look well, I use the ajaxComplete() function to bring the content back just when it's ready. But I don't think is the best idea. (If you want I can explain better)

Please, if you try something better, add a comment to help me improve my code.
Thanks.