How do I improve Javascript / jQuery animations?

Question

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

Just go to the page and "View Source" and you will see all the code.

Now it’s pretty simple. The right arrow key makes X right, the left arrow key makes it go left. It performs the current animation in the right direction, and the actual image element moves in one direction.

The main problem I'm facing right now is optimization. If you play a little with him, you will notice that the working animation is not always smooth, and during the first few seconds it feels very laggy, as if it is still loading something. Especially to blame for this animation to exit to the left. Another issue is with .animate () from jQuery. He makes a kind of stop-and-go movement, and you can tell. The motion of an image element is jerky and not very smooth.

.animate () from jQuery can be customized using mitigation, etc., but I'm not quite sure what the answer is and what still leaves me with a random run or something else. Anyone have any suggestions?

Answer 1

Use image preloading for sprite images or, even better, use one image as a sprite, and instead of replacing the image file, move the position of the image file. You need to set the image as a background image and reposition the background to achieve this.

Also, use linear attenuation, otherwise it will swing by default, which slowly enters and exits.

Answer 2

Have you considered using CSS3 transitions rather than standard jQuery animations? In doing so, you will get significantly better performance, but lose compatibility with multiple browsers. Here is an example that only works in Chrome but shows power

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

and much more about CSS3 animations

http://css3.bradshawenterprises.com/