jQuery height animation at the top, not the bottom of an element

HTML/CSS/JS here: http://jsfiddle.net/_mtr/XGe8d/2/

My problem is that the animation is taking place at the bottom of the element, not the top. I figure it's an issue with my CSS positioning, 开发者_StackOverflowbut I can't suss it out. And ideas?

Try

$(document).ready(function() {
    $("a").hover(

    function() {
        $(this).animate({
            'paddingTop': '+=10px'
        }), $(this).animate({
            'paddingTop': '-=10px'
        });
    });

});

If I understand what you're trying to achieve, one option is to animate padding-top instead of height.

here is another solution

http://jsfiddle.net/moeishaa/s26wr/

I updated your jsFiddle. I added position: relative to your css and used top(). I also added .stop(true, true) to eliminate queuing issues.