在mouseleave上停止動畫

Question

我環顧四周SO和真的無法找到一個很好的具體的答案。 我的問題是，當.mouseenter(function(){ })被觸發並且.mouseleave(function(){ })在完成兩個動畫后都被觸發時，我卻希望.mouseleave(function(){ })阻止.mouseenter(function(){ })完成其動畫效果。

這里有一個的jsfiddle的我現在怎么把它。

HTML：

<div id="header">
  <div id="header-align">

  </div>
</div>​

CSS：

#header {
  width: 100%;
  height: 200px;
  position: fixed;
  top: -170px;
}

#header #header-align {
  width: 400px;
  height: 100%;
  border: 1px dotted #000;  
  margin: 0 auto 0;   
}

jQuery的

​$("#header").mouseenter(function(){

  $(this).animate({ top: -20 }, {
    duration: 'slow',
    easing: 'easeOutBack'
  })

});

$("#header").mouseleave(function(){

  $(this).animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })

});

我在想諸如bind(function(){ })東西或諸如.stopPropagation()但找不到合適的答案

Answer 1

您是否嘗試添加.stop() ？

$(this).stop().animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })

的jsfiddle

您也可以考慮使用.hover() 。

​$("#header").hover(function(){
  $(this).stop().animate({ top: -20 }, {
    duration: 'slow',
    easing: 'easeOutBack'
  })
},
function(){
  $(this).stop().animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })
});