在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' 
    }) 
});