WebKit jQuery动画错误

WebKit jQuery animation bug

本文关键字：错误 动画 jQuery WebKit      更新时间：2023-09-26

我正在开发两个站点，在那里我使用jQuery通过CSS属性来动画化一些对象。Firefox中的一切都很好，但也有一些webkit错误，我的对象在动画开始前从屏幕上消失并重新出现。

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

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

我确信这一定是一个已知的错误，可以很容易地修复，但我似乎还找不到修复方法：（

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

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

类似这样的东西：

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

jsFiddle示例

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

相关文章：