title: Jquery animation on mouseover and stop on mouseout
body: <p>i have six buttons with this code :</p>
  
  <pre><code>$('img#b1').on('mouseenter', function() {
      var height = $('div#b1').css('height');
      if(height == '50px'){
          $('div#b1').animate({
          'width' : '1100'
      }, 200);
      }
  });
  $('img#b1').on('mouseout', function() {
      var height = $('div#b1').css('height');
      if(height == '50px'){
          $('div#b1').animate({
          'width' : '990'
      }, 200);
      }
  });
  </code></pre>
  
  <p>it works but if you quickly move mouse over and out for few times then take mouse out, it will resume the animation for times mouse went over it.</p>
  
  <p>i dont want to resume animation if mouse is not over it.</p>
  
  <p>how can i fix that?</p>