title: Stop animation on mouseleave
body: <p>I was looking around <strong>SO</strong> and couldn't really find a good concrete answer. My problem is that when the <code>.mouseenter(function(){ })</code> is fired and the <code>.mouseleave(function(){ })</code> is fired right after it completes both animation, instead I want the <code>.mouseleave(function(){ })</code> to stop the <code>.mouseenter(function(){ })</code> from finishing it's animation.</p>
  
  <p>Here' a <a href="http://jsfiddle.net/6nyEZ/1/" rel="nofollow">jsfiddle</a> of how I currently have it.</p>
  
  <p><strong>HtML:</strong></p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;div id="header-align"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#header {
    width: 100%;
    height: 200px;
    position: fixed;
    top: -170px;
  }
  
  #header #header-align {
    width: 400px;
    height: 100%;
    border: 1px dotted #000;  
    margin: 0 auto 0;   
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>​$("#header").mouseenter(function(){
  
    $(this).animate({ top: -20 }, {
      duration: 'slow',
      easing: 'easeOutBack'
    })
  
  });
  
  $("#header").mouseleave(function(){
  
    $(this).animate({ top: -170 }, {
       duration: 'slow',
       easing: 'easeOutBack'
    })
  
  });
  </code></pre>
  
  <p>I was thinking something like <code>bind(function(){ })</code> or something like <code>.stopPropagation()</code> but couldn't find a good answer</p>