Question

i am making a something like this :
When a user mouseenter DIV1 , the DIV2 will fadeIn and when the user mouseout DIV1 , DIV2 will fadeOut

But something weird is happening , when you hover in and out DIV1 quickly , the FADEIN and OUT effect of DIV2 will repeat the total number of your hovers in.

For example:
i quickly hovers in and out for 10 times @ DIV1 , DIV2 will continue to FADE IN and OUT for 10 times although my mouse is not hovering it.

I hope people understand what i’m saying.

CODE:

$('div1').bind('mouseenter', function() {
   $('div2').fadeIn(600);
});
$('div1').bind('mouseout', function() {
   $('div2').fadeOut(600);
});

Thanks and have a nice day .

Answer 1

use .stop(true,true) on the mouseout event that will stop all the existing animations

here is the working fiddle http://jsfiddle.net/XkmFy/