点击功能bug的WebKit动画
我设置了下面的代码来在点击某个对象时移动某些对象，但是您会在Safari和Chrome中看到这些框的动画有点偏离，而Firefox则显示出相关性。
有没有办法解决这个错误？
http://coreytegeler.com/jg/
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#nav li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
你所遇到的是webkit处理内联元素到固定元素转换的方式。 无论如何，即使您明确地告诉它，但将元素更改为固定时，它会默认左边为0。 您可以在此处准备好有关如何解决此问题的更多信息：居中定位：固定元素
基本上你需要将元素的左边位置设置为50％，然后计算元素宽度的1/2的负边界。
祝你好运，也许看看重写你的代码。 你应该检查出JQuery链接，因为你的一些代码是多余的。 另外，由于您只定位了一个元素，因此您可以放弃.each（），因为它们不是必需的。 当你想循环一个可能返回多个元素的选择器时，你只会使用.each。 在你的情况下，你的选择器只针对一个元素。 我已经重写了你的代码，以便更易读，更少冗余：
$(function(){
$("#nav ul li").click(function() {
$("#nav ul").css({
'position' : 'fixed',
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'left' : '10px',
'top' : '50%',
'margin-top' : '-140px',
'height' : '280px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'position' : 'fixed',
'top' : '100px'
} , 500, 'swing');
});
$("#nav ul li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%'}, 500, 'swing');
});
});