jQuery z-index and animate problem

I've got some code which animates my images on click and then adds a z-index to it.

What I need now is to when I click the close button I need it to animate back to its original state and then change the z-index back to how it was.

Currently it changes the z-index and then animates so it looks a bit strange

Here's an example

Is it possible to do?

I've tried putting a delay before the z-i开发者_如何学JAVAndex change but it still doesn't work

Any ideas?

http://jsfiddle.net/hD72c/1/ updated and fixed

All you need to do is change to z-index: 1 as a callback at the end of the animation rather then changing it straight away when close is clicked

http://jsfiddle.net/hD72c/3/

I just put the css to replace the original z-index in a callback function (instead of using a delay, since .css() doesn't add to the animation queue, it executes immediately)