Question

我环顾四周 SO 并且无法找到一个好的具体答案。我的问题是，当.mouseenter(function(){ })被触发并且.mouseleave(function(){ })在完成两个动画后立即触发时，我希望.mouseleave(function(){ })停止.mouseenter(function(){ })完成它＆＃ 39; s动画。

下面＆＃39; 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'
  })
});

在mouseleave上停止动画

1 个答案: