jQuery - Hover over element and animate element to that position

I want to make a menu that.. does this: http://jsfiddle.net/8U9fy/1/ ( didnt want to bother positioning them all that well... ) But... i would like to make it so that it isnt menu/link size dependent开发者_运维问答.. ( something like assigning the arrow to move according to specific elements class.. or something )

I was thinking something like.. http://docs.jquery.com/UI/Position But i dont know if .animate can be used with it..

So, to make it clear.. problem really isnt positioning the arrow according to specific element but rather.. doing so while animating the arrow movement..

Ideas?

Edit: I would like to achieve something similar like what ive done in that jsfiddle example.. buti would like to do it so that it doesnt matter what size the menu or the links are...

Currently the arrow position is controlled by left values from one position which means that if i wanted to.. lets say add padding between the links, i would have to adjust the .animate left values again and again..

Something like this should work. You'll need to tweak the location calculation to your needs.

var arrow = $(".Arrow");
$("ul#menu").delegate('a', 'mouseenter', function() {
    var left = $(this).offset().left - arrow.parent().offset().left + $(this).outerWidth()/2 - arrow.width()/2
    arrow.stop().animate({left: left}, 800, 'easeOutBack');
}); 

(Edited to add kingjiv's 'left' calculation.)