I have some content sliding here.
这里有一些内容在滑动。
http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html
http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html
The HTML structure is simple. There is an outer box with a fixed height and width with the overflow set to hidden. Then there is an inner container with the width set to the full width of the content inside of it which is a series of div elements marked with the Item class.
HTML结构很简单。有一个具有固定高度和宽度的外框，并将溢出集设置为隐藏。然后有一个内部容器，其宽度设置为其内部内容的全宽度，即一系列标有Item类的div元素。
To slide the inner container left and right I am changing the left margin. To go left I reduce the value which becomes negative and to go back to the right I return it to zero. But I am seeing a jagged animation, even in Chrome which I expect would perform better.
要上下滑动内容器，我要改变左边框。往左，我减少了变成负数的值，向右，我把它返回到零。但我看到的是一个参差不齐的动画，即使是Chrome，我认为它的表现会更好。
My question is, would it be smoother if I used a different technique to move it back and forth? Would absolute positioning be smoother or is there something else I should consider? Are there any secrets do smooth animation that I just do not know yet?
我的问题是，如果我用不同的技术来前后移动它会不会更平滑?绝对定位会更流畅吗?还是我还需要考虑别的什么?有什么秘密可以做光滑的动画，我只是还不知道?
2 个解决方案
#1
6
Margin would cause other elements to be recalculated because an element's margin affects the position of other elements around it.
边距会导致重新计算其他元素，因为元素的边距会影响其周围其他元素的位置。
Absolute positioning (on its own zIndex) would still cause repaints of other elements, but would be less costly in terms of calculating the objects around it.
绝对定位(在它自己的zIndex上)仍然会导致其他元素的重新绘制，但是在计算它周围的对象时将会更便宜。
This talk gives some good insight into how the browser/dom internals work
本文对浏览器/dom的内部结构如何工作提供了一些很好的见解
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page
#2
4
I've had good results using the jQuery "Easing" plugin, documentation here.
我使用jQuery“宽松”插件取得了很好的结果。
This allows you to apply various smoothed movement such as a sine, bounce, elastic, accelerate and so on, to an html element.
这允许您对html元素应用各种平滑的移动，如正弦、反弹、弹性、加速等等。
It's using the same techniques you mention under the hood, but it takes care of the messy absolute/relative positioning for you. It' also cross browser and has been optimised over new versions.
它使用了你在引擎盖下面提到的同样的技术，但是它会为你处理混乱的绝对/相对位置。它也跨浏览器，并优化了新版本。
One of best benefits of using easing however, is that it can help even low framerate animations look more impressive.
然而，使用宽松的最大好处之一是它可以帮助更低的帧动画看起来更令人印象深刻。
#1
6
Margin would cause other elements to be recalculated because an element's margin affects the position of other elements around it.
边距会导致重新计算其他元素，因为元素的边距会影响其周围其他元素的位置。
Absolute positioning (on its own zIndex) would still cause repaints of other elements, but would be less costly in terms of calculating the objects around it.
绝对定位(在它自己的zIndex上)仍然会导致其他元素的重新绘制，但是在计算它周围的对象时将会更便宜。
This talk gives some good insight into how the browser/dom internals work
本文对浏览器/dom的内部结构如何工作提供了一些很好的见解
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page
#2
4
I've had good results using the jQuery "Easing" plugin, documentation here.
我使用jQuery“宽松”插件取得了很好的结果。
This allows you to apply various smoothed movement such as a sine, bounce, elastic, accelerate and so on, to an html element.
这允许您对html元素应用各种平滑的移动，如正弦、反弹、弹性、加速等等。
It's using the same techniques you mention under the hood, but it takes care of the messy absolute/relative positioning for you. It' also cross browser and has been optimised over new versions.
它使用了你在引擎盖下面提到的同样的技术，但是它会为你处理混乱的绝对/相对位置。它也跨浏览器，并优化了新版本。
One of best benefits of using easing however, is that it can help even low framerate animations look more impressive.
然而，使用宽松的最大好处之一是它可以帮助更低的帧动画看起来更令人印象深刻。