WebKit jQuery動畫錯誤

Question

我有兩個網站正在使用jQuery通過CSS屬性為某些對象設置動畫。 一切在Firefox中都可以正常運行，但是在動畫開始前，我發現一些對象消失了並重新出現在屏幕上的Webkit錯誤。

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示例

這是基於您的第二個示例鏈接。