title: How to stop all previous animations in Jquery before executing new one?
body: <p>I am just experimenting something with JQuery.</p>
  
  <p>I have an image which fades into another image as <code>mouseOver()</code> occurs and fades back on <code>mouseOut()</code></p>
  
  <p>It works great, except if you are moving your mouse over the link again and again, say 5 times, the image fades in and out repeatedly, 5 times while you just sit there and wait for it to get over with this crazy behaviour.</p>
  
  <p>To stop this behaviour, I tried to use a flag and start the animation ONLY if it isnt already animating, but, guess what? If, say, I have 4 such buttons, and on each button mouseover i am fadingIn a different image, that animation will be ignored since the flag is false.</p>
  
  <p>so Is there a way to stop all the previous animations before executing new ones?
  I am talking about the normal <code>fadeIn()</code> and <code>slideDown()</code> functions in JQuery</p>
  
  <hr>
  
  <p><em>EDIT: Adding code from link.</em></p>
  
  <pre><code>&lt;a href="javascript:void(0);" onMouseOver="mouseOverOut(false);" onMouseOut="mouseOverOut(true);"&gt;Tick&lt;/a&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>function mouseOverOut(t)
  {
      if(t)
      {
          $('.img1').fadeIn();
          $('.img2').fadeOut();
      }
      else
      {
          $('.img1').fadeOut();
          $('.img2').fadeIn();
      } 
  }
  </code></pre>