Stopping jQuery animation loop
<p>I have the following animation:</p>

<p><a href="http://jsfiddle.net/jtqcj/2/" rel="nofollow">http://jsfiddle.net/jtqcj/2/</a></p>

<pre><code>jQuery("#fp-small-feature-1").mouseenter(function(){
    jQuery(".bar").animate({width: "264px"},500);
}); 

jQuery("#fp-small-feature-1").mouseleave(function(){
    jQuery(".bar").animate({width: "0px"},800);
}); 
</code></pre>

<p>How do I stop the animation from queuing up the effect if you mouse off and over a number of times in quick succession.</p>
