[jQuery] help with an animation effect

[Sir Rawlins]

Morning all,

I'm looking for some help with an animation effect and your thoughts
on how best to achieve it. At this stage we simply have a graphical
representation, we can splice the images up any way we like, I'm
really looking for your suggestions.

The first stage is just the basic static object:

http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view&current=satic.png

Then, we have a slight mouse-over effect on the small tab at the
bottom which slightly reveals the content (width a nice slidey
effect). On a mouse-out the tab would go back to it's static state.

http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view&current=mouse-over.png

Thirdly, once the tab has been clicked it should pull out (nice slidey
effect again), notice this isn't like the slideDown() effect, the
bottom of the thing comes out first, as if it were a card being pulled
out from behind another by hand. Also note that the text/icon on the
tab has changed.

http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view&current=sliding.png

Finally we have it's resting state once it's pulled out completely, a
click would simply send it back up again the way it came.

http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view&current=out.png

Now this with any luck would degrade so that if JS was disabled then
the tab would default to being fully pulled out so the content was
exposed for anyone viewing the site without JS enabled.

I'd imagine we'll be using the animate() method but this isn't
something I've worked with before, I'd appreciate any help you can
offer on how I should be structuring my HTML and JS for this.

Thanks guys I appreciate it.

Robert