如何使用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的最大好處之一是它可以幫助甚至低幀率動畫看起來更令人印象深刻。