jQuery動畫在Chrome上動畫之前跳躍

我通過製作一個容器div與overflow:hidden和其中的圖片div來創建滑動輪播，我試圖通過動畫left位置來動畫。像這樣：jQuery動畫在Chrome上動畫之前跳躍

的HTML

<div id="placeholder"> 
    <div id=carousel> 

     <img src="wideimagestitched.png"> 

    </div> 
</div>

的CSS：

#placeholder { 
    position: relative; 
    width: 500px 
    overflow: hidden; 
} 

#carousel { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
     }

jQuery的：

$("#rightbutton").click(function(event){ 

event.preventDefault(); 
$("#carousel").animate({"left": "-500px"}, 1000) 

});

這工作正常，順利地在Firefox，但在鍍鉻carousel DIV在動畫之前向左跳約200px，因爲它應該在右邊。我已經放慢了速度，並且可以看到應用的內聯樣式，並且在動畫之前它會向後跳200px左右。

任何幫助表示讚賞！

來源

2012-09-27 Benji Lanyado

這些代碼工作正常chorme 22檢查chorme版本，但我覺得你的問題是在其他代碼沒有瀏覽器！ – Afshin

謝謝...我也使用Chrome 22，但是defo跳躍。在代碼中看不到任何會執行此操作的任何內容。奇。 –

你的代碼工作正常，看到這個DEMO

來源

2012-09-27 17:03:51 Afshin

是的，這工作正常......但我的代碼不是。也許這可能是因爲我在中間啓動圖像，允許左/右擊。即Left被設置爲「-916px」，並且動畫將其帶到（右擊）「-1860px」和（leftclick）「0px」 –

我想這個問題是FOUC，之後的document.ready狀態的jQuery將工作，從而使瀏覽器從DOM中讀取任何內容將不行動的jQuery顯示在。把你的可視性關注代碼：隱藏，直到DOM被正確讀取，然後在取消隱藏的document.ready，你可以看到下面的例子在那裏我遇到了類似的問題

fouc example

來源

2012-09-27 19:34:08 sayannayas

您可以嘗試使用硬件加速有這個插件：件http://playground.benbarnett.net/jquery-animate-enhanced/

作品真的光滑

來源

2012-09-27 19:48:33 VMOrtega

jQuery動畫在Chrome上動畫之前跳躍

回答

相關問題