jQuery自动元素定位

Question

当您将鼠标悬停在菜单项上时，我想使用jQuery将箭头滑过菜单项。

您需要知道的是菜单位于带 li 项的 ul 元素中，文字以 text-align：center

箭头位于 ul 上方的 div 中。在 div 中，名为“arrow-container”是另一个 div ，名为“arrow”

箭头容器位于相对位置，箭头位于绝对位置。

一切都是1000px宽

提前感谢您的帮助！

请明确表示，我希望使用.animate（）滑动箭头，而不是让它弹出菜单项

Answer 1

我会这样做。使用$('#target').position()，您将获得元素与其父元素的相对坐标的对象。添加元素宽度的一半，减去箭头宽度的一半应该将箭头定位在目标元素的中间上方。

$('.menuElement').mouseenter(function() {
  $('#arrow').stop().animate({
    left: $(this).position().left+$(this).width()/2-$('#arrow').width()/2
  },{
    duration: 500,
    easing: 'swing'
  });
});