javascript - How do I stop a bouncy JQuery animation? -

in webapp i'm working on, want create slider divs move , down mouseover & mouseout (respectively.) have implemented jquery's hover() function, using animate() , reducing/increasing it's top css value needed. works well, actually.

the problem tends stuck. if move mouse on (especially near bottom), , remove it, slide & down continuously , won't stop until it's completed 3-5 cycles. me, seems issue might have 1 animation starting before done (e.g. 2 trying run, slide , forth.)

okay, code. here's basic jquery i'm using:

$('.slider').hover(     /* mouseover */     function(){         $(this).animate({             top : '-=120'         }, 300);     },     /* mouseout*/     function(){         $(this).animate({             top : '+=120'         }, 300);     } ); 

i've recreated behavior in jsfiddle.

any ideas on what's going on? :)

==edit== updated jsfiddle

it isn't perfect, adding .stop(true,true) prevent of seeing.

http://jsfiddle.net/w5esj/18/

if hover bottom quickly, still flicker because moving mouse out of div causing mouseout event fire, animating div down.

you can lessen flicker reducing delay, still present until delay 0 (no animation)

update

i thought , realized there obvious solution this. hoverintent-like functionality!

http://jsfiddle.net/w5esj/20/

$(document).ready(function() {     var timer;     $('.slider').hover(         /* mouseover */         function(){             var self = this;             timer = settimeout(function(){                 $(self).stop(true,true).animate({                     top : '-=120'                 }, 300).addclass('visible');             },150)         },         /* mouseout*/         function(){             cleartimeout(timer);             $(this).filter(".visible").stop(true,true).animate({                 top : '+=120'             }, 300).removeclass("visible");         }     ); });