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