我目前正在开发一个网站，该网站可以动态构建一个由小块组成的“城市”。建筑物和城市道具都使用“位置：绝对”和“左”定位。它们都放在一个容器 div 上（也带有“位置：绝对”），而容器 div 又放在另一个 div 上（带有“位置：相对”），该容器使用“溢出：隐藏”来限制可见部分。为了定位用户相机，我更新了容器 div 的“left”CSS 属性，有效地向左或向右移动内容。到目前为止，一切顺利。
问题在于，在功能较弱的浏览器和机器上，动画真的很慢。我目前正在使用一个 30 毫秒的计时器，它会调用一个刻度函数，这个刻度函数将处理用户输入，计算新的左侧并相应地更新 CSS。这自然会导致多次浏览器重排，有时动画看起来很慢。
您可以在这里查看：website>
脚本：script>
有人对我如何优化这个有什么建议吗？
【问题讨论】：
标签： html css optimization animation css-position
我最终优化了这一点，用滚动定位代替了绝对定位，并在 Mozilla 和 Webkit 上使用 requestAnimationFrame 技巧来提高帧率性能。以下是遇到此问题的人的一些提示：
关于 requestAnimationFrame() 函数（支持浏览器的高效异步动画）： https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
在 jQuery 中获取和更新 div 的滚动位置： http://api.jquery.com/scrollLeft/
【讨论】：
【讨论】：
jQuery.animate来做到这一点，它也可以让你停止动画，你可以在:hover事件上添加一个.animate()（首先检查它没有运行）然后.stop() 失去焦点时
:hover 你animate（如果不是:animated）上，异步启动动画。然后当它失去焦点时你stop()。我会尝试用一个例子来更新。