Question

I was looking around SO and couldn’t really find a good concrete answer. My problem is that when the .mouseenter(function(){ }) is fired and the .mouseleave(function(){ }) is fired right after it completes both animation, instead I want the .mouseleave(function(){ }) to stop the .mouseenter(function(){ }) from finishing it’s animation.

Here’ a jsfiddle of how I currently have it.

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

});

I was thinking something like bind(function(){ }) or something like .stopPropagation() but couldn’t find a good answer

Answer 1

Did you try adding in a .stop()?

$(this).stop().animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })

jsFiddle

You may also consider using .hover().

​$("#header").hover(function(){
  $(this).stop().animate({ top: -20 }, {
    duration: 'slow',
    easing: 'easeOutBack'
  })
},
function(){
  $(this).stop().animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })
});