Preventing jQuery function to repeat effect twice?

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开发者_JS百科 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 .

---

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

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

---

You can stop the existing animation when you start a new animation instead of stacking them up:

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

---

You want .stop, which stops the current animation so that the animation queue does not get filled up with deferred animations: http://jsfiddle.net/pQQ2G/.

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

Also, you shuold use #div1. div1 selects div1 elements, whereas you have div elements I suppose.

---

use this

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

hope it helps