How do you move a div element in jquery

Question

So basically i have a menu like this: [home, projects, sounds, contact], with a little circle on top of the menu. so i want it that when i click a menu item the little circle moves to the item(on top of it).

So something like this:

This is my jquery so far:

$(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');
    });

});

My 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>

Css:

#indicatorBar{
  top: 0px;
  right: 60px;
  font-size: 7px;
  color: #B4FF47;

}

.menuContainer{
    position: fixed;

    width: 100%;
    top: 0%;
    left: 0%;
    bottom: 92%;
    opacity: 0.7;
  z-index:9;
  background: #16161F;

   animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

Examples will be greatly appreciated, Thanks a million !

Answer 1

Here's a quick demo based on the code that you provided: http://jsfiddle.net/k7ypa/

Basically, I'm just getting the position of the element that was clicked.

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');
 });

Answer 2

I suggest you use absolute positioning for #indicatorBar.

In the click event of a menu item, get the event's target (event.target where event is parameter in the function). Now add to the existing position the value of : [target's position().left + target's width() / 2], you will get your new position.

Note: Use jQuery's outerWidth() instead of width() if there are paddings/margins for the menu items. It looks like there are.

Answer 3

a quick and dirty answer is

1. add a class to manage this little circle.
2. when on of your menu object is select add this class to it and hide it from the previous one (you need to store in a variable the previous menu... or you can check which one is not selected and with this class)

and you're set