how to animate a menu item into a large div (window) using jquery's animate?

Question

i'm pretty sure this can be done pretty easily with jquery's animate api, but i'm not good enough to figure it out. what i want to do is this:

i have a menu item at the top of the viewport that the user will click on. when the user clicks on it, you'll see something that looks like the div "popping" out of the menu and float to a particular location on the screen. when i say popping i don't mean anything fancy - i just mean it appears to be originating from the menu item and settling somewhere on the screen that i specify. but the important part is that this animation happens really fast. fast enough where you don't have to actually wait for the window to appear, but slow enough so the eye sees the animation start from the menu item and end up at a new location where the window will actually appear, and appear with a specify height and width.

hope that all made sense?

Answer 1

jQuery('#someelement').css({position:'absolute'}).animate({width: 200,height:200, left:'+=500'},1000,function(){}).hide();

The width/height make the menu item get bigger, and the left moves it 500 pixels from its starting position. Inside the function, place your callback to open the widow.