WebKit jQuery動畫bug

Question

我有兩個站點，我正在使用jQuery通過CSS屬性爲某些對象設置動畫。在Firefox中所有的東西都很棒，但是有一些webkit的bug會讓我的對象在動畫開始之前消失並重新出現在屏幕上。

http://coreytegeler.com/gl/（單擊文本框）

$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' }); 

http://coreytegeler.com/justin/（單擊任何框）

$("#nav ul li").click(function() { 
    $("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing'); 
    $("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing'); 
    $("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing'); 
    $("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing'); 
    $("#nav").animate({'margin-top' : '100px'} , 500, 'swing'); 
}); 

我敢肯定，這必須是一個已知的錯誤有一個簡單的辦法，但我似乎無法找到一個修復程序:(

Answer 1

從我可以弄出來的，問題似乎是webkit不能動畫的left屬性從什麼是最初的'自動'值到像素偏移量。它所做的是將屬性設置爲0，然後從那裏設置動畫。

我可以建議的一個解決方案是在開始動畫之前計算每個li元素的當前像素偏移量，並將它們的left屬性設置爲這些偏移量。

事情是這樣的：

$("#nav ul li").each(function(){ 
    $(this).css('left', $(this).position().left + 'px'); 
}); 

jsFiddle example

這是基於你的第二個例子鏈接。