在容器内动画div绝对位置的有效方法

Question

我目前正在开发一个动态构建由小构建块组成的“城市”的网站。建筑物和城市道具都使用“position：absolute”和“left”定位。它们都放在一个容器div（也是“position：absolute”）上，而div又放在另一个div（带有“position：relative”）上，使用“overflow：hidden”限制可见部分。为了定位用户摄像头，我更新了容器div的“左”CSS属性，有效地向左或向右移动内容。到目前为止，非常好。

问题是，在能力较弱的浏览器和机器上，动画效果很慢。我目前正在使用一个30ms计时器，它将调用一个tick函数，这个tick函数将处理用户输入，计算新左边并相应地更新CSS。这自然会导致几次浏览器重排，有时动画看起来确实很慢。

您可以在此处查看：＆lt; website＆gt;

脚本：＆lt; script＆gt;

任何人对我如何优化这一点都有任何建议？

Answer 1

使用jQuery.animate()

这将使您能够完成您想要的任务，并且它可能比您现有的更好地进行优化。

更新：这是我的example！

希望它有所帮助。

Answer 2

我最终通过使用滚动定位替换绝对定位，并使用Mozilla和Webkit上的requestAnimationFrame技巧来优化此功能，以提高帧速率性能。这里有一些指向遇到这个问题的人：

关于requestAnimationFrame（）函数（有能力的浏览器上的高效异步动画）： https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

在jQuery中获取和更新div的滚动位置： http://api.jquery.com/scrollLeft/