Разноцветное jQuery меню

Красочное горизонтальное jQuery меню. При перемещении куросра по пунктам меню за ним будет двигаться прямоугольник заданного цвета, чем то напоминает меню в стиле лава ламп.

HTML

      <div id="menu">
        <ul>
          <li>
            <a href="">Веб-дизайн</a>
          </li>
          <li>
            <a href="">jQuery</a>
          </li>
          <li>
            <a href="">Html5 и Css3</a>
          </li>
          <li>
            <a href="">PHP</a>
          </li>
          <li>
            <a href="">Photoshop</a>
          </li>
          <li>
            <a href="">Illustrator</a>
          </li>
          <li>
            <a href="">Wordpress</a>
          </li>
          <li>
            <a href="">Статьи</a>
          </li>
          <li>
            <a href="">vBulletin</a>
          </li>
        </ul>
      </div>

CSS

#menu { 
     float: left;
     position: relative; 
     top: 0; 
     left: 0; 
     overflow: hidden;
     }
#menu .colourful {
     display: block;
     position: absolute;
     background: #f0ad22; 
     height: 38px;
     width: 85px; 
     top: 4px; 
     left: -100px;
     }
#menu ul { 
     margin: 0; 
     padding: 0;
     list-style: none;
     float: left; 
     position: relative;
     top: 0; 
     left: 0;
     z-index: 1; 
     }
#menu li {
      float: left;
      margin: 0 1px 0 0;
      }
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { 
     color: #000; 
     text-align: 
     center; display:block;
     border:solid; 
     border-width:4px 0 0; 
     line-height: 40px;
     width: 85px;
     }
#menu li a:hover {
     text-decoration: none;
     color: #fff;
     text-shadow: 0 0 1px #999; 
     }

JS

Подключаем jQuery и плагин easing эффектов:

        <script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/jаvascript" src="js/easing.js"></script>

Скрипт осуществляющий анимацию цветов и фона init.js:

jQuery(document).ready(function($) {
    
    /*define easing you can omit this if 
    you don't want to use the easing plugin*/
jQuery.easing.def = "easeInOutBack";    
    /* create the span tht will be animated across the menu*/
    /* declare our many variables for easy ref*/
        var $span = $('<span class="colourful"></span>');
        $span.insertBefore($("#menu ul"));
        
        var $menu_link = $('#menu li a'),
        $hovered =  $('#menu a.hovered'),/**/
        $hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/
        
        /* declare our many colors that can confuse a chameleon*/
        var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];
        
        /*iterate through all menu links and apply colors to border top */
        $menu_link.each(function(index){
            
                    $menu_link.eq(index).css('border-color',$colour_arr[index]);
                
            });    
            
    /* all the magic happens here*/
    function init () {
        
        if($hovered_pos) {
                $span.css('left',$hovered_pos);
                var index = 0;
                /* search for the selected menu item*/
                for(i=0; i<$menu_link.length; i++) {
                    if($($menu_link).hasClass('hovered')) {
                        index = i;
                    }
                }
                $span.css('background',$colour_arr[index]);
                
        }
        
        /*mouseenter funtion*/
        $menu_link.each(
            function( intIndex ){
                $(this).on (
                    "mouseenter",
                        function(event){
                            
                            var x = $(this).position('#menu');
                            x = x.left;
                            
                                $span.css('background',$colour_arr[intIndex]);
                            
                            $span.stop();
                            $span.animate({
                                
                                left: x
                              },600);
                        }
                    );
         
                }
         );
         
        /* mouseout function*/
        $menu_link.each(
            function( intIndex ){
                $(this).on (
                    "mouseleave",
                        function(event){
                            $span.stop();
                        var x = -100;
                        if($hovered_pos) {
                            x = $hovered_pos;
                            var index = 0;
                            for(i=0; i<$menu_link.length; i++) {
                                if($($menu_link).hasClass('hovered')) {
                                    index = i;
                                }
                            }
                                $span.css('background',colour_arr[index]);
                            
                        } 
                        
                          $span.animate({
                                
                                left: x
                              },600);
                        }
                    );
                }
         );
    }
    /* call init our function*/
    init();
});