CODEWITHSUNDEEP
jquery
b-marls
b-marls

Reputation: 307

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 but 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.

Upvotes: 1

Views: 2636

Answers (3)

adeneo
adeneo

Reputation: 318332

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/

Upvotes: 0

Mike Lentini
Mike Lentini

Reputation: 1358

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/

Upvotes: 3

Jeff Hutchins
Jeff Hutchins

Reputation: 735

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.

Upvotes: 0

Related Questions