How do I make this Javascript/jQuery animation better?

Question

Webpage is - http://schnell.dreamhosters.com/spriteanimate.html

Just go to the page and 'View Source' and you'll see all the code.

Right now it's pretty simple. Right arrow key makes X go right, left arrow key makes him go left. He does a running animation in the proper direction and the actual image element moves in the same direction.

The major issue I have with this right now is optimization. If you play around with it a little you'll notice that the running animation isn't always smooth and for the first few seconds it feels very laggy, like it's still loading something. The animation for going left is particularly guilty of this. Another problem is with the .animate() from jQuery. It does a sort of stop-and-go motion and you can tell. The movement of the image element is jerky and not very smooth.

The .animate() from jQuery can be tweaked with easing and such, but I'm not entirely sure if that's the answer and that still leaves me with the occasional running lag or something. So does anyone have any suggestions?

Answer 1

Use image preloading for the sprite images, or better still, use one image as a sprite, and instead of swapping the image file, shift the position of the image file. You need to set the image as a background image and shift the background position to achieve this.

Also, use linear easing, otherwise it will default to swing, which enters and exits slowly.

Answer 2

Have you considered using CSS3 transitions rather than standard jQuery animations. In doing so you'll have dramatically better performance but lose some cross browser compatibility. Here's an example which only works in Chrome but shows the power

http://girliemac.com/sandbox/matrix.html

and more about CSS3 animations

http://css3.bradshawenterprises.com/