防止jQuery的效果基本show跳带空白

Question

我有一个通过

top:50% 
left:50% 

设置和计算margin-top和margin-left它在屏幕的中间位置重叠。

我想将它滑出去以除掉它，但由于边距的缘故，它开始变得疯狂。

看看这个小提琴有相同的结果。我能做什么？除非有更好的方法在屏幕中间找到完美的位置，否则我无法真正摆脱边缘。

https://jsfiddle.net/edjrdy61/1/

Answer 1

如果你想防止带有边距的跳转，你必须强制边距，因为jquery slideUp()在运行时改变边距。

试试这个：

.foo { 
    width:100px; 
    height:100px; 
    background:green; 
    margin-top:100px !important; 
} 

但是，如果你想获得更好的方式来调整屏幕的中间为中心，用绝对的或固定的位置。例如：

.foo { 
    width:100px; 
    height:100px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background:green; 
} 

Answer 2

你不在这里想要一个保证金，你要设定的位置。根据您所描述的内容，这是屏幕上的固定元素。因此，你应该把它修好。

的CSS更改为这样的事情：

.foo { 
    display:block; 
    position:fixed; 
    width:100px; 
    height:100px; 
    background:green; 
    top:50%; 
    left:50%; 
} 

JS Fiddle。