网页是 - http://schnell.dreamhosters.com/spriteanimate.html
只需转到页面并“查看来源”，您就会看到所有代码。
现在它非常简单。右箭头键使X向右，左箭头键使他向左。他以正确的方向运行动画，实际的图像元素向同一方向移动。
我现在面临的主要问题是优化。如果你稍微玩一下，你会注意到正在运行的动画并不总是平滑的，并且在最初的几秒钟内它感觉非常迟钝，就像它仍在加载一些东西。左边的动画特别内疚。另一个问题是来自jQuery的.animate（）。它做了一种停止走走动作，你可以说。图像元素的运动不稳定且不太平滑。
来自jQuery的.animate（）可以通过缓动等进行调整，但我不完全确定这是否是答案，这仍然让我偶尔出现运行滞后或其他问题。那么有人有任何建议吗？
答案 0 :(得分：2)
对精灵图像使用图像预加载，或者更好的是，使用一个图像作为精灵，而不是交换图像文件，移动图像文件的位置。您需要将图像设置为背景图像并移动背景位置以实现此目的。
此外，使用线性缓和，否则它将默认为摆动，进入和退出缓慢。
答案 1 :(得分：0)
您是否考虑过使用CSS3过渡而不是标准的jQuery动画。这样，您将获得显着更好的性能，但会失去一些跨浏览器兼容性。这是一个仅在Chrome中有效但显示强大功能的示例
http://girliemac.com/sandbox/matrix.html
以及有关CSS3动画的更多信息