jQuery - 将鼠标悬停在元素上并将元素动画到该位置

Question

我想制作一个菜单……这样做：http://jsfiddle.net/8U9fy/1/（不想费心把它们定位得那么好……）但是……我想使它不是菜单/链接大小依赖..（例如根据特定元素类分配箭头移动..或其他东西）

我在想类似的东西..http://docs.jquery.com/UI/Position 但我不知道 .animate 是否可以与它一起使用..

所以，说清楚..问题实际上不是根据特定元素定位箭头，而是..在动画箭头移动时这样做..

想法？

编辑：我想实现类似于我在那个 jsfiddle 示例中所做的事情。但我想这样做，以便菜单或链接的大小无关紧要......

目前箭头位置由一个位置的左值控制，这意味着如果我想.. 假设在链接之间添加填充，我将不得不一次又一次地调整 .animate 左值..

Answer 1

这样的事情应该可以工作。您需要根据需要调整位置计算。

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');
}); 

（已编辑添加 kingjiv 的“左”计算。）