Animated nav for single-page navigations

navimate.js

$(function() {
    var $navItems = $('li');
    var $offsets = new Array();
    var $widths = new Array();
    
    var $activeOffset,
        $activeWidth,
        newPos;
    
    $navItems.each(function() {
        $offsets.push($(this).position().left);
        $widths.push($(this).width());
    });
    
   console.log($offsets);
    console.log($widths);
    
    $('.active-nav li').click(function() {
        $navItems.each(function() {
          $(this).removeClass('menu-item-active');  
        });
        $(this).addClass('menu-item-active');
        activeAnimation();
        
    });
    
    var activeAnimation = function() {
      $activeOffset = $('.menu-item-active').position();
      $activeWidth = $('.menu-item-active').width();
      newPos = $activeOffset.left + ($activeWidth / 2) + 10;
        
     console.log(newPos);
        console.log($activeOffset);
        
        $('#active-item').animate({
            'left': newPos + 'px'
        },500, 'swing')
    }
});

WIP. Live demo at http://jsfiddle.net/cjLzqLd9/