JQuery автоматическое позиционирование элементов

Question

Я хотел бы использовать jQuery для перемещения стрелки по элементам меню, когда вы наводите на них указатель мыши.

Что нужно знать, так это то, что меню состоит из элемента ul с li элементами, текст центрируется с помощью text-align: center

стрелка находится в div над ul . Внутри этого div , называемого "контейнер-стрелка" , находится еще один div , называемый "стрелка"

контейнер-стрелка позиционируется относительно, а стрелка позиционируется абсолютно.

Все в ширину 1000 пикселей

Заранее спасибо за помощь!

пожалуйста, дайте понять, я хотел бы, чтобы стрелка скользила, используя .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'
  });
});