在draggable（）：jquery上动画GIF

Question

我希望利用jQuery的UI插件来创建类似于this jsfiddle的draggable（）和droppable（）行为。唯一的区别;当draggable（）被激活时，我希望购物车能够通过动画进行播放，以使用户可以放弃他们的项目更加明显。

然而，我需要的动画无法通过CSS完成，它是图像本身的动画。我既有动画的GIF，也有相同的JPEG序列，无论哪种效果最好。实现这一目标最优雅的方法是什么？

仅供参考：代码来自IBM developerWorks article by Michael Abernethy

Answer 1

您可以为draggable's start事件添加回调，以更改购物车图片的src属性，然后再添加stop回调以更改回来。

实例：http://jsfiddle.net/ambiguous/yM9s5/6/

另一种方法是：

1. 将<img>放置目标替换为<div>。
2. 通过CSS调整<div>的大小以匹配<img>。
3. 将背景图片添加到<div>以匹配<img>的视觉效果。
4. 在background-image课程中添加border，并将该图片设置为动画GIF。

例如：http://jsfiddle.net/ambiguous/yM9s5/5/

这应该适用于动画GIF，但我没有一个方便检查。