jquery - Wait for hover animation to finish before executing other -

hopefully isn't repeated question, can't seem find answer. here problem:

i have hover animation done in jquery, if user hover link, want first animation callback , animate again.

here example of i've got far : http://sebastien-crapoulet.fr/test/

if have link 'a propos', full animation, want if go 'a propos' 'portfolio', propos callback finish, execute other hover animation.

i have fiddled around .stop() , .filter(':not(:animated)'), unsuccessfully.

here i've got far :

$('nav ul li a').hover(function(){     link               = $(this)     color              = $(this).data("color")     position           = link.position();     background         = $('.menubackground')      if (color=="blue"){         background.css({             'background-color':'#99b3c4',             'width':(position.left)+(link.width())+20+'px',             'top':position.top+'px'         })         background.stop().animate({             left:'0%'         },500)     }     if (color=="green"){         background.css({             'background-color':'#91b6a5',             'width':(position.left)+(link.width())+20+'px',             'top':position.top+'px'         })         background.stop().animate({             left:'0%'         },500)     }     else {         return false;     } },function(){     background.stop().animate({         left:'-100%'     },500)     return false; }) 

thanks in advance give !

when user hovers on first element animate second element closing , first element opening , vise versa.