CODEWITHSUNDEEP
jquery
John Abraham
John Abraham

Reputation: 18811

Break mouseenter animation when mouseleave()'s current selector

http://jsfiddle.net/ZtpEU/41/ heres a simple animation in jquery. I'm trying to make it so the animation is only excuted when the mouseenter occurs. Moreover, you will notice that if you frantically mouseenter and leave, the element animations are remembered and this and basically makes them frantically animate.

I'm looking for this animation to only execute as long as the mouse is hovered over that particular element. If moved, animation is then resets and animates the next hover'd element.

Sorry this is really difficult to word. I'll be very attentive on answers. Lastly, i'm looking for more this css transition effect (this only happens in google chrome or i'd do it this way)

Upvotes: 3

Views: 2222

Answers (1)

Ram
Ram

Reputation: 144699

you can use stop() method:

$("li").on('mouseenter',function(){
  $(this).animate({"padding-left": "50px"}, "normal");
});
$("li").on('mouseleave',function(){
  $(this).stop(true).animate({"padding-left": "0px"}, "slow");
});

http://jsfiddle.net/ZtpEU/43/

Upvotes: 8

Related Questions