Animating a series of results with Jquery

I am attempting to animate a series of result开发者_开发技巧s form a database query using jQuery.

Firstly I would like it to display similar to the example on Soh Tanaka's web tutorial. But I also want to add a behaviour that when a used clicks the one their hovering over, it expands to fill the entire parent element (in this example its a ) using jQuery .

I was hoping to have this happen 'above' the other elements maybe using z-index. but I want the element to expand relative to its position on the page.

Select element hovered over as per Soh Tanaka's tutorial

This element animates and expands in this way

But this one has to animate diferently

Final finishing position of the element after the animation

I would also like to have the elements image to say in the top left had corner and further details fade in the enlarged box after the animation has finished.

It would also be nice if they could click a back button and the animation reveres. I'm not sure if this would have to be some kind of overlay like a light box or something as I don't want the other elements to have to move out the way for the selected element to be animated

Hope someone has a suggestion

Dan

I created a jsfiddle implementation of what you seem to be asking for.

http://jsfiddle.net/dm55u/3/

Just add your image to the box div.

Let me know if i can be of further assistance

EDIT

Updated my example to include proper hover effect you asked for.

http://jsfiddle.net/dm55u/5/

Only needs some fine tuning. A lot of the javascript code could for example be shared with common functions. But ill leave that task up to you. Anyways, here is a working example of what you asked for. All you need to now is add your content and fine tune it.

EDIT

Im a bit ashamed to say this. But it seems i couldn't help myself. i added some more effects to the example provided. So here is yet another version ;)

http://jsfiddle.net/dm55u/9/