Javascript 使用jQuery animate（）更改大小时内联块锚移动

所以我有几个链接使用内联块排列。当我在一个上面盘旋时，我希望它变大。我使用jQuery的animate（）函数来实现这一点

问题是，当链接的高度发生变化时，它旁边的所有链接都会向下移动，然后在离开链接时又会向上移动。我希望链接在顶部保持垂直对齐

以下是我所拥有的：

.thumbs-wrapper { width: 100%; position: relative; margin: 20px 0 0 0; }
.thumbs { height: 65px; position: absolute; background-color: #A0A0A0;
          top: 0; right: 0; }
.thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
            height: 30px; width: 70px; background-color: #FFFFFF; }


$('.thumbs a').hover(function () {
    $(this).animate({ 'height': '50px', 'width': '80px' }, 'fast');
}, function () {
    $(this).animate({ 'height': '30px', 'width': '70px' }, 'fast');
});


<div class="thumbs-wrapper">
    <div class="thumbs">
        <a>Link 1</a>
        <a>Link 2</a>
        <a>Link 3</a>
    </div>
</div>

.thumbs包装{宽度：100%；位置：相对；边距：20px 0；}
.拇指{高度：65px；位置：绝对；背景色：#a0；
顶部：0；右侧：0；}
.thumbs a{border:2px solid#02AFEC；光标：指针；显示：内联块；
高度：30px；宽度：70px；背景色：#FFFFFF；}
$（'.thumbs a'）。悬停（函数（）{
$（this.animate（{'height'：'50px'，'width'：'80px'，'fast'）；
}，函数（）{
$（this.animate（{'height'：'30px'，'width'：'70px'，'fast'）；
});
. 尽管由于某些原因，动画似乎不起作用。
添加
垂直对齐：顶部
到CSS，用于
。拇指a

添加
垂直对齐：顶部
到CSS，用于
。拇指a

添加

vertical-align:top;

到.thumbs一个规则集

.thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
        height: 30px; width: 70px; background-color: #FFFFFF; vertical-align:top}

加

到.thumbs一个规则集

.thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
        height: 30px; width: 70px; background-color: #FFFFFF; vertical-align:top}

我添加了
float:left到JSFIDLE示例中的CSS。这应该管用。

另外，我还将使用的框架从Mootools改为jQuery。
我添加了
float:left到JSFIDLE示例中的CSS。这应该管用。

另外，我还将使用的框架从Mootools改为jQuery