如何使这个Javascript/jQuery动画更好？

网页为-

只要转到页面并“查看源代码”，您就会看到所有代码

现在很简单。右箭头键使X向右移动，左箭头键使X向左移动。他在正确的方向上运行动画，实际的图像元素在相同的方向上移动

我现在面临的主要问题是优化。如果你稍微玩一下，你会注意到跑步的动画并不总是平滑的，在最初的几秒钟里，它感觉非常迟钝，好像它还在加载东西。向左走的动画对此特别内疚。另一个问题是jQuery中的.animate（）的问题。它做了一种停下来又走的动作，你可以看出来。图像元素的移动是不平稳的，不是很平滑

---

jQuery中的.animate（）可以通过放松之类的方式进行调整，但我不完全确定这是否是答案，这仍然会让我偶尔出现运行延迟或其他问题。有人有什么建议吗？

对精灵图像使用图像预加载，或者更好的是，使用一个图像作为精灵，而不是交换图像文件，移动图像文件的位置。您需要将图像设置为背景图像，并移动背景位置以实现此目的

---

另外，使用线性缓和，否则它将默认为swing，缓慢地进入和退出。

您是否考虑过使用CSS3转换而不是标准的jQuery动画。这样做会显著提高性能，但会失去一些跨浏览器兼容性。下面是一个仅在Chrome中工作的示例，但展示了它的强大功能

还有更多关于CSS3动画的信息

---

它在Chrome上运行非常好。Firefox是一个问题。。。