title: jquery animate function not stable
body: <p>I have a simple animate function, its working but when mouse hover/leave quick its unstable/(or not working properly). Specially in mouse leave remove() function not work some time. Do quick mouse work there you'll find the problem</p>
  
  <pre><code>jQuery(document).ready(function(){
    jQuery('#social_link1').hover(function () {
      jQuery(this).animate({
          width: '+=130px',
      }, 200, '', function () {
         if(jQuery(this).children('span').length &lt; 1){
                  jQuery(this).append('&lt;span&gt;ফেইসবুকে আমরা&lt;/span&gt;');
          }
      });
  
  
  }, function () {
      jQuery(this).children('span').remove();
      jQuery(this).animate({
          width: '-=130px',
      });
  
  });
  
  jQuery('#social_link2').hover(function () {
      jQuery(this).animate({
          width: '+=130px',
      }, 200, '', function () {
         if(jQuery(this).children('span').length &lt; 1){
                           jQuery(this).append('&lt;span&gt;টুইটারে আমরা&lt;/span&gt;');
                   }
      });
  
  
  }, function () {
      jQuery(this).children('span').remove();
      jQuery(this).animate({
          width: '-=130px',
      });
  
  });
  
  jQuery('#social_link1,#social_link2').mouseleave(function(){
             jQuery(this).children('span').remove();
       });
  });
  </code></pre>
  
  <p>see details
  <a href="https://jsfiddle.net/e2txv8a6/" rel="nofollow">https://jsfiddle.net/e2txv8a6/</a></p>