What's the best way to animate margin-top as an inverse to height?

I'm currently working on a personal project here: http://jsfiddle.net/THEtheChad/qusqh/. As you'll notice, the 'link' jumps around as the element above it is animated. This is because the jQuery animate method doesn't step through the height and margin-top properties at the same intervals.

I'm still fairly fresh at Javascript and jQuery. I was wondering if anyone had a simple way to correct the problem or a snippet of code that works more efficiently?

PS Feel free to use the concept/code in any of your own projects. If you have any recommendations to optimize开发者_开发问答 or improve the usability, please, let me know!

Thanks guys!

One option is to set the height on .bubble-box to something tall enough for the bubble and the <a> and absolutely position the <a> at the bottom of the box:

.bubble-box {
    width: 100px; /* must be same width as bubble */
    height: 120px;
    text-align: center;
    float: left;
    position: relative;
}
.bubble-box a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

That way the vertical position of the <a> won't depend on what the .bubble is doing and it won't jiggle around during the animation.

Demo: http://jsfiddle.net/ambiguous/Vw7uQ/