title: jQuery mouseleave function isn't being triggered when mouse moves quickly
body: <p>I have a timeline with little pins on it which when hovered over, slide up or down and then display a caption. When the mouse leaves, the caption should disappear and the pin moves back. This works, but with the code I am using, if the mouse moves too quickly, it doesn't detect the mouse leave. How can I fix this?</p>
  
  <p>P.S, the only reason I am using mouse enter/leave is because I think I needed to use live() as my elements are added dynamically after the document loads.</p>
  
  <pre><code>    $('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){
      $(this).animate({
          top:25
      }, 200, function(){
          $(this).find('.caption').stop(true, true).fadeIn(200);
      });     
  }).live('mouseleave',function(){
      $(this).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){
          $(this).parents('li').animate({
              top:30
          },200);         
      });
  });
  </code></pre>