如何从中心开始jquery .animation

Question

Jquery的：

$(function() {
    $( ".active" ).animate({width: "100%"}, 500);
});

HTML：

<div class="active"></div>

使用样式：

.active {
    background: #1f679b;
    height: 4px;
    margin-top: -4px;
    width: 0px;
}

如何从中心开始动画而不是从左侧开始？

Answer 1

以50％的保证金开始：

.active {
    background: #1f679b;
    height: 4px;
    margin-top: -4px;
    width: 0px;
    margin-left: 50%;
}

并将其设置为0：

$(function() {
    $( ".active" ).animate({
        width: "100%", 
        marginLeft: 0
    }, 500);
});

http://jsfiddle.net/Qkh6n/

Answer 2

只需更改

margin-top: -4px

到

margin: -4px auto 0 auto;

结果效果是增长的div，但在动画期间，由于左右边距设置为auto，因此它总是居中。无需更改动画属性

---

Codepen示例：http://codepen.io/anon/pen/IpFxn