title: jQuery menu slide hover glitch
body: <p>I made a menu with &lt; divs > and am using mouseover mouseout functions to append and remove a tongue (like a description for each menu icon). The issue I am having is when I hover over the tongue, it executes (correctly) the mouseout function for the button and removes the tongue. </p>
  
  <p>How can I prevent this? Thank you!</p>
  
  <p><a href="http://jsfiddle.net/QZ75D/" rel="nofollow">http://jsfiddle.net/QZ75D/</a></p>
  
  <pre><code>$('#wrapper').on('mouseover', '.1, .2, .3, .4, .5', function(){
      var tongue = '&lt;div class = "tongue"&gt;'+$(this).attr('value')+'&lt;/div&gt;';
      $(tongue).appendTo($(this)).animate({width:"toggle"});
  });
  $('#wrapper').on('mouseout', '.1, .2, .3, .4, .5', function(){
      var that = $(this);
      $('.tongue').animate({width:"toggle"},function(){
          that.children('.tongue').remove();
      });
  }); 
  </code></pre>
  
  <p>Bonus: The text also is affected by the width animation. Any way to fix that?</p>