Question

I’m looking to utilize jQuery’s UI plugin to create draggable() and droppable() behavior similar to this jsfiddle. The only difference; I would like the shopping cart to play through an animation when draggable() is activated to make it more obvious to the user where they can drop their items.

However, the animation I require can not be accomplished via CSS, it is an animation of the image itself. I have both a GIF of the animation and also the equivalent sequence of JPEGs, whichever works best. What’s the most elegant way to accomplish this?

FYI: The code is sourced from an IBM developerWorks article by Michael Abernethy

Answer 1

You could add a callback for the draggable’s start event to change the src attribute of your cart image and then a stop callback to change it back.

Live example: http://jsfiddle.net/ambiguous/yM9s5/6/

Another approach is this:

1. Replace your <img> drop target with a <div>.
2. Size the <div> through CSS to match the <img>.
3. Add a background image to the <div> to match the visual effect of the <img>.
4. Add a background-image to your border class and set that image to your animated GIF.

For example: http://jsfiddle.net/ambiguous/yM9s5/5/

That should work with an animated GIF but I don’t have one handy to check.