Efficient way to animate a div absolute position within a container

I'm currently working on a website that dynamically builds a "city" made of little building blocks. The buildings and city props are all positioned using "position: absolute" and "left". They all lay on a container div (also with开发者_Python百科 "position: absolute"), which in turn is laid on another div (with "position: relative") that limits the visible part using "overflow: hidden". In order to position the user camera, I update the container div's "left" CSS property, effectively moving the content left or right. So far, so good.

The problem is that, on less capable browsers and machines, the animation is really slow. I'm currently using a 30ms timer that'll call a tick function, and this tick function will process the user input, calculate the new left and update the CSS accordingly. This is, naturally, causing several browser reflows and sometimes the animation really looks sluggish.

You can check it out in here: <website>

The script: <script>

Anyone has any suggestions on how I may optimize this?

use jQuery.animate()

This will allow you to accomplish what you want and it's probably way better optimized than what you currently have.

Update: Here's my example!

Hope it helps.

I ended up optimizing this by replacing absolute positioning with scroll positioning, and using the requestAnimationFrame trick on Mozilla and Webkit to improve framerate performance. Here are some pointers to whoever encounters this problem as well:

About the requestAnimationFrame() function (efficient async animations on capable browsers): https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

Getting and updating a div's scroll position in jQuery: http://api.jquery.com/scrollLeft/