我有两个网站,我正在使用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');
});
我相信这是一个已知的错误,有一个简单的修复方法,但我似乎还找不到修复方法:(
1条答案
按热度按时间omqzjyyz1#
就我所知,问题似乎是webkit无法将
left
属性从最初的“auto”值动画化为像素偏移。它所做的是将属性设置为0,然后从那里设置动画。我建议的一个解决方案是,在开始动画之前立即计算每个
li
元素的当前像素偏移量,并将其left
属性设置为这些偏移量。大概是这样的:
jsFiddle example
这是基于您的第二个示例链接。