以 CSS 为中心的 div 从错误的位置进行动画处理

Question

我试图使用CSS将div居中，然后使用jQuery的animate函数将其向左滑动。 CSS 和 animate 函数正在工作，但是当动画开始时，div会跳到右侧，然后从该位置进行动画处理。

我创建了一个小提琴来演示问题。 请注意，红色和黄色框应从相同的中心位置开始，但红色框在窗口中开始进一步动画化。

http://jsfiddle.net/Zeaklous/XMKCc/2/

为了向自己证明 animate 在没有以 CSS 为中心的div 的情况下正常工作，我在同一小提琴中使用 javascript 居中的两个框。 粉色框从我期望的位置（直接在紫色框上方）进行动画处理。

我能做些什么来让以 CSS 为中心的div 与 animate 一起正常工作？

下面的代码

.centeredByCSS {
    left:0;
    right:0;
    margin:0 auto;
    width:50px;
    height:50px;
    position:absolute;
}
.centeredByJS {
    width:50px;
    height:50px;
    position:absolute;
    top:75px;
}
.yellow {
    background:yellow;
}
.red {
    background:red;
}
.purple {
    background:purple;
}
.pink {
    background:pink;
}
<div id="box1" class="centeredByCSS red">TEST1
</div>
<div id="box2" class="centeredByCSS yellow">TEST2
</div>
<div id="box3" class="centeredByJS purple">TEST3
</div>
<div id="box4" class="centeredByJS pink">TEST4
</div>
$(function(){
    //manually center the purple and pink boxes
    var location=(window.innerWidth/2)-parseInt($("#box3").css("width"))/2;
    $("#box3").css("left", location);
    $("#box4").css("left", location);
    // now animate two of the boxes 100 pixels left
    $("#box1").animate({left: "-100"}, 10000);
    $("#box4").animate({left: "-100"}, 10000);
})

Answer 1

这是因为您的 CSS 标记居中不正确。当你有 position:absolute; 时，margin:0 auto;不会使你的对象居中。相反，您需要使用left:50%和元素宽度一半的负margin-left，如下所示：

.centeredByCSS {
    left:50%;
    margin-left:-25px;
    right:0;
    width:50px;
    height:50px;
    position:absolute;
}

此外，如果要将对象从其当前位置向左移动 -100px，则应使用-=

$("#box1").animate({left: "-=100px"}, 10000);
$("#box4").animate({left: "-=100px"}, 10000);

更新的小提琴