javascript - 带有居中 div 的动画

Question

我有一个非常简单的布局，在一个较小的 div 中有一个较大的 div，我想对其进行动画处理:

<div style="
        position: relative;
        left:100px;
        width:200px;
        height:400px;
        background:red;
        overflow:visible"
>
    <div id="stamp" style="
            position:absolute;
            margin: 0 auto;
            bottom:-150px;
            width:200%;
            height:150px;
            background:blue"
    ></div>
</div>

JS:

$("#stamp").animate({
    bottom: "200",
    width: "150%"
}, 400, function() {
    $("#stamp").animate({
        width: '80%', 
    }, 220, function() {
        // Animation complete.
    });
});

JSFiddle Here

我想要但无法弄清楚的是，我希望蓝色 div 居中，而不是左对齐。

所以蓝色 div 将开始居中，向上动画(仍然居中)，然后在动画之后蓝色 div 将以 80% 宽度居中。

Answer 1

所以最终蓝色 div 将具有 80% 的宽度。为什么不向蓝色 div 添加边距。

margin-left:10%;

JSFiddle