我有两个网站,我正在使用 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');
});
这基于您的第二个示例链接。
关于javascript - WebKit jQuery 动画错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17505227/