微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在draggable上将GIF动画:jquery

如何解决在draggable上将GIF动画:jquery

| 我正在寻找利用jQuery的UI插件创建类似于此jsfiddle的draggable()和droppable()行为。唯一的区别;我希望购物车在激活draggable()时通过动画播放,以使用户可以放下物品的地方更明显。 但是,我所需的动画无法通过CSS完成,它是图像本身的动画。我既有动画的GIF,也有等效的JPEG序列,以效果最佳者为准。实现这一目标的最优雅的方法是什么? 仅供参考:该代码来自Michael Abernethy的IBM developerWorks文章。     

解决方法

        您可以为draggable \的
start
事件添加回调以更改购物车图片的
src
属性,然后添加
stop
回调以将其更改回。 实时示例:http://jsfiddle.net/ambiguous/yM9s5/6/ 另一种方法是: 用
<div>
替换
<img>
下降目标。 通过CSS调整
<div>
的大小以匹配
<img>
。 向
<div>
添加背景图像以匹配
<img>
的视觉效果。 在您的
border
类中添加
background-image
并将该图像设置为动画GIF。 例如:http://jsfiddle.net/ambiguous/yM9s5/5/ 这应该与动画GIF一起使用,但是我没有一个方便的检查方法。     

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。