我有下面的代码设置为点击一个对象时移动某些对象,但你会看到在Safari和Chrome中,框的动画有点关闭,而Firefox显示它正确。
有办法解决这个bug吗?
$(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');
});
});
1条答案
按热度按时间j8yoct9x1#
您正在体验的是webkit处理将内联元素转换为固定元素的方式。无论如何,当你将元素更改为fixed时,它将默认左侧为0,即使你明确地告诉它不是这样。你可以在这里准备更多关于如何解决它的信息:Center a position:fixed element
基本上,你需要将元素的左边位置设置为50%,然后计算元素宽度的1/2的负边距。
祝你好运,也许你可以重写你的代码。你应该检查jQuery链接,因为你的一些代码是多余的。此外,由于您只针对一个元素,因此可以删除.each(),因为它们不需要。只有当你想在一个可能返回多个元素的选择器中循环时,你才可以使用.each。在本例中,选择器只针对一个元素。我已经重写了你的代码,使其更具可读性,更少冗余: