title: Jquery - fadeIn/fadeOut flicker on rollover
body: <p>I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it's parent div.  </p>
  
  <pre><code>$('.rollover-section').hover(function(){  
     $('.target', this).stop().fadeIn(250)
   }, function() {
     $('.target', this).stop().fadeOut(250)
  })
  </code></pre>
  
  <p>It works correctly when I rollover the div and out <em>slowly</em>. However if I move my mouse over and then off the div quickly, it breaks the effect. The target div seems to get stuck at an opacity between 0 and 1. </p>
  
  <p>What confuses me is that when I use the following code it works perfectly.</p>
  
  <pre><code>$('.rollover-section').hover(function(){  
    $('.target', this).stop().animate({
        opacity: 1
      }, 250);
  }, function() {
    $('.target', this).stop().animate({
        opacity:0 
      }, 250);
  })
  </code></pre>
  
  <p>So, I have two questions. </p>
  
  <p>1 - why is my first code block behaving as it does?</p>
  
  <p>2 - What is the difference between fadeIn()/fadeOut() and animating the opacity?</p>