Question

I would like to use jQuery to slide the arrow over the menu items as you hover your mouse over them.

What you need to know is that the menu is in a ul element with li items, the text is centered with text-align:center

the arrow is in a div above the ul. Within that div, called “arrow-container” is another div, called “arrow”

arrow-container is positioned relative, and arrow is positioned absolute.

Everything is 1000px wide

Thanks in advance for the help!

please let it be clear, I’d like the arrow to slide, using .animate(), not just make it pop up above the menu item

Answer 1

I would do it this way. With $('#target').position() you get an object of the relative coordinates of the element to its parent. Adding half of the width of the element, substracting half of the width of the arrow should position the arrow above the middle of the target element.

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