jQuery自动元素定位

Question

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

你需要知道的是，菜单是在一个包含li项的ul元素中，文本以text-align:center

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

arrow-container 是相对定位的，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'
  });
});