title: jquery mouseover mouseout
body: <pre><code>$('.rollover').mouseover(function(e){
  
          e.stopPropagation();
  
          thisName = $(this).attr('title');
  
          $('li#'+thisName).show(50, 'swing');
  
      });
  
  
      $('.rollover').mouseout(function(e){
  
          e.stopPropagation();                    
  
          thisName = $(this).attr('title');
  
          $('li#'+thisName).hide(50, 'swing');
  
      });
  </code></pre>
  
  <p>I have four pictures with the class 'rollover', so when the mouse goes over each picture, a list item that shares its id with the image title is displayed, and when the mouse leaves the list item is hidden.</p>
  
  <p>My problem is that the images are quite close together and if the mouse enters and leaves too quickly it just looks like the list items are flashing. I would prefer it so that the mouseout animation has to complete before the next mouseover animation begins and vice versa.</p>
  
  <p>How would i do this?</p>
  
  <p>JS FIDDLE @ <a href="http://jsfiddle.net/callumander/XhpuT/" rel="nofollow">http://jsfiddle.net/callumander/XhpuT/</a></p>