Javascript 如何在jquery中移动div元素

所以基本上我有一个这样的菜单：[家，项目，声音，联系]，菜单上有一个小圆圈。所以我希望当我点击一个菜单项时，小圆圈移动到它上面的项目

比如说：

这是迄今为止我的jquery：

$(document).ready(function(){
  var position = 80;
    $('.navP').click(function(){
        // change all to black, then change the one I clicked to red     
       $('#indicatorBar').animate({'margin-left':'+='+position+'px'}, 1000);
       $('.navP').css('color', 'white');
        $(this).css('color', 'red');
    });

});

我的html：

<div class ="menuContainer">

    <span id="indicatorBar">
            <i class="icon-circle"></i>
        </span>

<a class="nameBanner"  href="#mainPage"> Ipalibo Whyte</a>

<ul>

    <li><a class="navP" href="#mainPage">Home</a></li>
    <li><a class="navP" href="#projectContents">Projects</a></li>
    <li><a class="navP" href="#musicContent">Sounds</a></li>
    <li><a class="navP" href="#contactContent">Contact me</a></li>

</ul>

</div>

---

示例将不胜感激，万分感谢

我建议您对指示杆使用绝对定位

在菜单项的单击事件中，获取事件的target event.target，其中event是函数中的参数。现在将[target's position.left+target's width/2]的值添加到现有位置，您将获得新位置

---

注意：如果菜单项有填充/边距，请使用jQuery的outerWidth而不是width。看起来有。

一个又快又脏的答案是

添加一个类来管理这个小圆圈。 当菜单对象的“打开”处于打开状态时，选择“将此类添加到它并从上一个类中隐藏它，您需要将其存储在变量“上一个菜单”中。。。或者，您可以检查未选择的选项，并使用该类

---

您已经设置好了

下面是一个基于您提供的代码的快速演示：

基本上，我只是得到被点击元素的位置

JavaScript:

 $('.navP').click(function () {
     // move dot
     var position = $(this).position().left + $(this).width()/2 - 5;
     $('#indicatorBar').animate({
         'margin-left': position + 'px'
     }, 1000);
     // change all to black, then change the one I clicked to red
     $('.navP').css('color', 'white');
     $(this).css('color', 'red');
 });

---

它现在做什么？它是动画还是移动？你能贴一把小提琴吗？你已经把位置硬编码了。您需要使用jQuery函数来确定当前a元素的位置。类似于var position=$this.position.left；将获取已单击元素的左边缘。获取元素的宽度，除以2，将其添加到左侧，就可以了。@zero298当您单击任何按钮时，它只会向左移动LOL如此多的单击可以将圆完全移出屏幕吗？

 $('.navP').click(function () {
     // move dot
     var position = $(this).position().left + $(this).width()/2 - 5;
     $('#indicatorBar').animate({
         'margin-left': position + 'px'
     }, 1000);
     // change all to black, then change the one I clicked to red
     $('.navP').css('color', 'white');
     $(this).css('color', 'red');
 });