Question

I am having an issue on mouse hover effect. My code is below and jsfiddle link

$(".first").hover(function() {
   $(this).children('.second').fadeIn('500');
});
$(".first").mouseleave(function() {
   $(this).children('.second').fadeOut('500');
});

If place my mouse in and out for few times and leave, the effect keep happens for while.
What I want is until the first mouse hover effect finishes I don’t want to keep going the effect for a while.
Please ask me if you don’t understand this.

Thanks guys for your time, I figure it out a simple way below
Just use fade to function instead of fade in then it works.
Here is the code and demo

$(".first").hover(function() {
   $(this).children('.second').stop().fadeTo('slow',1);
});
$(".first").stop().mouseleave(function() {
   $(this).children('.second').stop().fadeTo('slow',0);
});

Answer 1

To add some context to your own solution:

.fadeIn() and .fadeOut() modify the display property (toggling between block and none respectively).

Using fadeTo() will modify the transparency only, omitting the behaviour of the element needing to complete its transition between visible and invisible. Because of this, .stop() will function as expected.

Also, using .stop().fadeTo() will give the same result as using:

.stop().animate({ opacity: 0.5 }, 1000);