JQuery: оживить центр другого объекта

Question

Я пытаюсь создать навигационный слайдер, который похож на стрелку, скользящую по ссылкам навигации. Я хотел бы оживить его до центра div.

Это мой нав код:

<nav> 

     <ul class="tabs"> 
      <li id="tab1"><a href="#">Cursussen</a></li> 
      <li id="tab2"><a href="#">Resultaten</a></li> 
      <li id="tab3"><a href="#">Inbox</a></li> 
      <li id="tab4"><a href="#">Profiel</a></li> 
      <li id="tab5"><a href="#">Aanbod</a></li> 
     </ul> 

     <a id='slider'><img src="img/arrow.png"></a> 

</nav> 

И это JQuery я использовать для анимации:

$(function(){ 
     $('li#tab1').click(function(evt) { 
      evt.preventDefault(); 
      $('#slider').animate({ 
       left : '32' 
      }); 
     }); 
}); 

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

var w = '$(#slider).parent().width()'/2 

Answer 1

Пожалуйста, попробуйте это Js скрипка:

http://jsfiddle.net/Q4efa/2/

В частности, я использовал следующий метод:

$('ul.tabs li').click(function(event){ 

    event.preventDefault(); 

    var ulOffsetLeft = $('ul.tabs').offset().left; 
    var currentOffset = $(this).offset().left; 

    var delta = currentOffset - ulOffsetLeft; 

    $('#slider').clearQueue().animate({'margin-left': delta}); 

});​ 

UPDATE: Я добавил некоторый автоматический расчет обивки этой новой скрипки здесь:

http://jsfiddle.net/Vt2dv/8/