WebKit jQuery 动画错误答案

【问题标题】：WebKit jQuery animation bugWebKit jQuery 动画错误
【发布时间】：2013-07-06 17:14:06
【问题描述】：

我正在开发两个网站，我使用 jQuery 通过 CSS 属性为一些对象设置动画。在 Firefox 中一切正常，但存在一些 webkit 错误，我的对象在动画开始之前消失并重新出现在屏幕外。

$('#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');
});

我确定这一定是一个已知错误，可以轻松修复，但我似乎还找不到修复方法 :(

【问题讨论】：

标签： javascript jquery css google-chrome webkit

【解决方案1】：

据我所知，问题似乎是 webkit 无法将 left 属性从最初的“自动”值动画到像素偏移。它所做的是将属性设置为 0，然后从那里开始动画。

我可以建议的一种解决方案是在开始动画之前立即计算每个li 元素的当前像素偏移量，并将它们的left 属性设置为这些偏移量。

类似这样的：

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

jsFiddle example

这是基于您的第二个示例链接。

【讨论】：