Strange .stop() behaviour when mouseout / over

Strange .stop() behaviour when mouseout / over

hello,
 
I've put together a little rollover script. When a link is hovered in a tag cloud a statusbar is shown with a little more information on the keyword.
 
The strange behaviour happens if you quickly move from hyperlink to hyperlink without letting the animation duration finish, then when you move your mouse over another link it will only animate to the point it stopped at when the last link was exited.
 
Any ideas. I would think there is something very simple I am doing wrong.
  1.     $(document).ready(function() {
       
            var tc = $('.tagCloud');
            var tcTrigger = $('.tagCloud a');
            var statusBar = $('.tagsContainer .statusBar');
            var statusBarPad = statusBar.css('paddingLeft').replace(/px/, "");
            var tabContainerHeight = $('#tabContainer').outerHeight();





  2.         statusBar.css('bottom', tabContainerHeight).css('width', (tc.width() - statusBarPad))
  3.         statusBar.hide();
  4.         tcTrigger.hover(
  5.         //Mouse Over
          function() {
                    statusBar.stop().fadeIn(50);
          },
            //mouse out
          function() {
              statusBar.stop().fadeOut(50);
          }
         );







  6.     });