JQuery animation height at the top, not the bottom of the element

Question

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

My problem is that the animation happens at the bottom of the element, not the top. I believe this is a problem with my CSS positioning, but I can't judge it. And ideas?

Answer 1

here is another solution

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

Answer 2

Try

$(document).ready(function() { $("a").hover( function() { $(this).animate({ 'paddingTop': '+=10px' }), $(this).animate({ 'paddingTop': '-=10px' }); }); }); 

Answer 3

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

Answer 4

I updated your jsFiddle . I added a position: relative to your css and used top (). I also added .stop (true, true) to fix the queue problems.