如何创建与使用Javascript一个精灵表动画按钮？ [英] How can I create an Animated Button with a Sprite Sheet using Javascript?

问题描述

我想创建一个使用精灵表动画按钮。该动画应悬停玩，然后在鼠标移开动画应该完成，然后停止。

I am trying to create an animated button using a sprite sheet. The animation should play on hover and then on mouseout the animation should finish and then stop.

我怎么能去这样做？我曾尝试设置一个div的背景和控制通过悬停事件背景的位置。我可以在后台位置设置本身正常，但每次改变去这么快它也可能是瞬间使动画不显示自身。

How can I go about doing this? I have tried setting the background of a div and controlling the background position through hover events. I can get the background position to set itself properly but each change goes so fast it might as well be instant and so the animation does not show itself.

任何建议将是有益的。很多没有运气搜索之后，我不知道什么尝试。

Any suggestions would be helpful. After a lot of searching with no luck I am not sure what else to try.

感谢您！

推荐答案

最好的建议是使用CSS3。结果
pretty容易不需要的javascript：

the best advice would be to use a CSS3.
pretty easy no need for javascript:

看一看例如：

http://codeitdown.com/css-sprite-animations/

例如，在这里：

http://jsfiddle.net/drukaman/ued7mLha/1/

这篇关于如何创建与使用Javascript一个精灵表动画按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！