javascript - 在 mouseleave 上停止动画

Question

我环顾四周，找不到一个好的具体答案。我的问题是，当它.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'
  })
});