jQuery border effekt på menu

Kære udviklere,

Igen sidder jeg med et problem med noget jQuery animation jeg prøver at lave. Jeg fik løst mit sidste problem, men er nu stødt på et nyt.

Jeg har en 2px høj border under min header, hvor jeg gerne vil animere en border som bliver vist under det menu-link man hover over.

Scriptet virker såmænd fint nok. Når jeg holder over et menu-link, som ikke passer til den side jeg er inde på, bevæger borderen sig hen på linjen til det menupunkt jeg holder over. Den animerer også bredden så den tilpasser sig menupunktet.

Dog, hvis jeg allerede hover over et menupunkt og flytter musen direkte til f.eks. det næste menupunkt (altså jeg flytter ikke musen udenfor menuen) så flytter borderen sig tilbage på det menupunkt der passer til den side man er på, og først derefter flytter sig til det nye menupunkt. Normalt når jeg flytter musen væk fra menuen flytter den sig tilbage på menu-punktet der svarer ti den side man er inde på - hvilket er med vilje, men den flytter sig også hvis jeg gør som overstående.

Eksemplet kan ses på hjemmesiden.

Scriptet ser således ud:

 var current_page_item   = $( '.main-navigation .menu .current_page_item' ),
         menu_hover          = $( '.main-navigation .menuHover' ),
         last_x_position     = current_page_item.position().left,
         last_width          = current_page_item.width();
         
     moveBorder( last_x_position, null );
     justifyBorderWidth( last_width, null );
     
     function justifyBorderWidth( width, effect ) {
         if( effect === null ) {
             menu_hover.css({ width: width });
         } else if( effect === 'animate' ) {
             menu_hover.animate({ width: width }, 'fast');
         }
     }
     
     function moveBorder( x, effect ) {
         if( effect === null ) {
             menu_hover.css({ left: x });
         } else if( effect === 'animate' ) {
             menu_hover.animate({ left: x }, 'fast');
         }
     }
     
     $( '.main-navigation .menu li' ).hover(function() {
         var this_x_position = $(this).position().left;
         
         moveBorder(this_x_position, 'animate');
         justifyBorderWidth( $(this).width(), 'animate' );
     }, function() {
         moveBorder(last_x_position, 'animate');
         justifyBorderWidth( last_width, 'animate' );
     });

Jeg ved at problemet forekommer ved min hover function, altså functionen der bliver kaldt når jeg flytter musen væk. For hvis jeg f.eks. fjerner de sidste 3 linjer før "});" løses problemet, men dog bliver borderen ikke flyttet tilbage på sin oprintlige plads som den skal. Jeg forstår fuldt ud det jeg har skrevet, jeg kan bare ikke helt finde en løsning. Jeg håber at der er nogen der kan hjælpe :-).