动画高度时，jQuery不能从顶部效果动画

Question

我正在尝试在jQuery中创建一个垂直高度动画，它有一个非常奇怪的效果，在最好的条件下，我可以解释它是：

div的高度为100px，动画从~15px开始，动画向外向上15px然后向下85px而不是仅向上100px。

注意：我尝试删除负边距，但不能解决问题。

这是我的css

.content {
width: 60%;
margin: 0 auto; }

.content .bar {
height: 0px;
width: 20px;
display: inline-block;
margin-right: 20px;
margin-bottom: -5px; }

.content span {
display: inline-block;
vertical-align: top;
font-family: 'Slabo 27px', serif;
opacity: 0; }

HTML

<div class="content">
        <div class="10">
            <div class="bar red"></div>
            <span>Content goes here</span>
        </div>
        <div class="20">
            <div class="bar blue"></div>
            <span>Content goes here</span>
        </div>
    </div>

我正在为网页中的其他元素使用jQuery UI。