在可拖动（）上动画 GIF：jquery

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，但我没有方便检查。