Question

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

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

为了向自己证明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);

Updated Fiddle

CSS居中的div从错误的位置动画

1 个答案: