Как переместить элемент div в jQuery ⇐ Html

[Anonymous]

У меня есть такое меню: [дом, проекты, звуки, контакт] с небольшим кружком в верхней части меню, поэтому я хочу, чтобы при нажатии на пункт меню маленький кружок перемещался к этому элементу (поверх него).
Что-то вроде этого:

Это мой 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:

Код: Выделить всё

[/i]


[url=#mainPage] Ipalibo Whyte[/url]

[list]

[*][url=#mainPage]Home[/url]
[*][url=#projectContents]Projects[/url]
[*][url=#musicContent]Sounds[/url]
[*][url=#contactContent]Contact me[/url]

[/list]

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 */

Примеры будут очень признательны.

Подробнее здесь: https://stackoverflow.com/questions/223 ... -in-jquery