title: How to add multiple event (mouseover/mouseout) into one selector
body: <p>If I <code>mouseover</code>/<code>mouseout</code> very fast  more than one time during animation times (here 900). Button  is animating more than one time; even when I stopped mouse activity.</p>
  <p>I want that it will take only one event for animation during animation times; even when multiple event triggered.
  Other way I want to say if I triggered multiple <code>mouseover</code> event  during 900 it will terminate immediately when I triggered <code>mouseout</code> and vice-versa.</p>
  <pre><code>$(document).ready(function () {
      $(&quot;button&quot;).mouseover(function () {
          $(this).css({
              background: 'transparent',
              color: '#09F'
          });
          $(&quot;button&quot;).animate({
              width: &quot;110%&quot;,
          }, 900);
          $(this).text(&quot;Show More &gt;&quot;);
      });
      $(&quot;button&quot;).mouseout(function () {
          $(this).css({
              background: '#09F',
              color: '#FFF'
          });
          $(&quot;button&quot;).animate({
              width: &quot;100%&quot;,
          }, 900);
          $(this).text(&quot;Show More&quot;);
      });
  });
  </code></pre>
  <p><a href="http://jsfiddle.net/goldfingerxyz/Y26zS/" rel="nofollow noreferrer">Here's an JSFiddle to show you the behaviour</a></p>