Остановка анимации на мышином плеере

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

}); 

я что-то вроде 012 мышлениеили что-то вроде .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' 
    }) 
});