當使用jQuery改變大小時，內嵌塊錨點移動（）

Question

所以我有幾個鏈接使用內聯塊排隊。當我徘徊在一個以上時，我希望它變得更大。我正在使用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> 

我創建了一個的jsfiddle：http://jsfiddle.net/kd9XP/2/。雖然動畫似乎沒有工作出於某種原因。

Answer 1

將vertical-align: top;添加到.thumbs a的CSS中。

http://jsfiddle.net/mblase75/kd9XP/4/

Answer 2

添加

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} 

Answer 3

我在你的jsfiddle例如添加float: left;到CSS。這個工作。
P.S.我還將用過的框架從Mootools改爲jQuery。