Animated card stack

I'm trying to create a stack of cards that if you click will open out to reveal the individual cards. I created the stack and the behavior that reveals the cards b开发者_JAVA百科ut now want to add some animation of the cards moving into their new locations(as they are revealed).

http://jsfiddle.net/psivadasan/zbkBn/

Appreciate any help.

jQuery provides an awesome method called animate. You can animate any numeric CSS property. You use this quite easily to change the position of your card divs.

http://api.jquery.com/animate/

EDIT:

Here is an example for you:

http://jsfiddle.net/zbkBn/31/

You want to use the jquery animate function.

You'll have to change your code so that on a click you'll run the animation function on each item that you're animating and then if you want to you can add a call back function that will change the class of the block items that you're moving.

Since the other answers are about animate(), wich is probably the way to go, I'll just mention that since you are already using toggle(), it too supports animation. However you can't really animate classes, but here is an example just to show how animating looks with toggle : http://jsfiddle.net/zbkBn/38/