I have some content sliding here.
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.
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.
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?
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.
This talk gives some good insight into how the browser/dom internals work
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page