如何使用JavaScript/jQuery获得更流畅的滑动内容？

Question

我有一些内容在这里滑动。

http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html

的HTML结构是简单的。有一个固定高度和宽度的外箱，溢出设置为隐藏。然后有一个内部容器，其宽度设置为其内容的全部宽度，这是一系列用Item类标记的div元素。

左右滑动内部容器我正在更改左边距。向左走，我减少变成负值的数值，然后返回到右边，将它归零。但我看到了一个锯齿状的动画，即使在Chrome中，我预计它的表现会更好。

我的问题是，如果我用不同的技术来回移动它会更顺畅吗？绝对定位会更顺畅还是还有其他我应该考虑的事情？有没有什么秘密可以做到我还不知道的流畅动画？

Answer 1

边距会导致其他元素重新计算，因为元素的边距会影响其周围其他元素的位置。

绝对定位（在它自己的zIndex上）仍然会导致重绘其他元素，但是在计算周围的对象方面成本较低。

这次谈话给出了一些很好的洞察浏览器/ DOM内部是如何工作的

http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page

Answer 2

我已经使用jQuery“宽松”的插件，documentation here了良好的效果。

这使您可以将各种平滑运动（如正弦，反弹，弹性，加速等等）应用于html元素。

它使用的是您在引擎盖下提到的相同技巧，但它会照顾到凌乱的绝对/相对定位。它也跨浏览器，并且已经在新版本上进行了优化。

然而，使用easing的最大好处之一是它可以帮助甚至低帧率动画看起来更令人印象深刻。