爲Chrome，Safari等同步jQuery動畫

什麼是最好的/正確的方式去同步動畫與jQuery？我需要消除橫向手風琴動畫中的小抖動。爲Chrome，Safari等同步jQuery動畫

下面是問題的鏈接（該網站是正在進行的工作）。 http://repaintthecity.com/new/index_2.html

這裏是的jsfiddle問題的副本，如果測試站點出毛病了：http://jsfiddle.net/cj4MQ/1/

動畫抖動發生在最右邊的塊。我試圖搞亂動畫隊列，但沒有實現似乎完全消除抖動。任何幫助/建議將不勝感激。

這是一個很好的設計。使用Chrome 16/Linux時，我看不到任何抖動。在一個不相關的說明中，你有沒有考慮過改變寬鬆策略？我發現這個動作有點奇怪，我猜這是因爲（據我所知）在整個動畫中速度是統一的。 – 2012-01-16 00:58:37

謝謝。在最新版本的Firefox中，抖動並不明顯，但在Chrome 16/OS X Lion中對我來說似乎最爲明顯。我一直在搞不同的鬆動選項，但我恢復了一切回到標準，以嘗試消除抖動。 – 2012-01-16 01:09:11

它似乎很好，我的Chrome和Firefox在Windows 7上沒有看到任何抖動。 – XepterX 2012-01-16 02:12:55

雖然看起來兩個動畫同時發生，但它們不是。對於所有實際的目的，想象他們輪流改變他們的寬度。（閱讀http://ejohn.org/blog/how-javascript-timers-work/）

簡單的答案是你不能，也可能不應該。您正在使用單個線程化javascript過程來製作2個寬度的動畫。無論如何嘗試以這種方式製作動畫，無論如何，你都必然會遇到抖動。

您可以嘗試通過將容器寬度設置爲固定寬度來隱藏抖動，同時強制最後一個元素。

2012-01-24 23:53:14

回答