[英]WebKit jQuery animation bug
我有两个网站正在使用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');
});
我敢肯定这是一个容易修复的已知错误,但我似乎还找不到修复方法:(
根据我的判断,问题似乎在于webkit无法将left
属性从最初的“自动”值设置为像素偏移量。 它将属性设置为0,然后从那里进行动画处理。
我可以建议的一种解决方案是,在开始动画之前立即计算每个li
元素的当前像素偏移,并将它们的left
属性设置为这些偏移。
像这样:
$("#nav ul li").each(function(){
$(this).css('left', $(this).position().left + 'px');
});
这是基于您的第二个示例链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.