Inline-block anchors moving when changing size with jQuery animate()

So I have several links lined up using inline-block. When I hover over one, I want it to be made bigger. I'm doing this using jQuery's animate() function.

The problem is that when the link's height gets changed, all the links next to it get move down, and then back up when you leave the link. I'd like for the lin开发者_如何学编程ks to remain vertically aligned at the top.

Here's what I have:

.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>

I created a jsFiddle: http://jsfiddle.net/kd9XP/2/. Although the animation doesn't seem to be working for some reason.

Add vertical-align: top; to the CSS for .thumbs a.

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

Add

vertical-align:top;

to the .thumbs a ruleset

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

I added float: left; to CSS in your jsFiddle example. This shuld work.
P.S. I also changed used framework from Mootools to jQuery.