Mouse hover effect bugging
<p><img src="http://i.stack.imgur.com/SVDgK.gif" alt="enter image description here">I am having an issue on mouse hover effect. My code is below and <a href="http://jsfiddle.net/LTJe6/1/" rel="nofollow">jsfiddle link</a></p>

<pre><code>$(".first").hover(function() {
   $(this).children('.second').fadeIn('500');
});
$(".first").mouseleave(function() {
   $(this).children('.second').fadeOut('500');
});
</code></pre>

<p>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.</p>

<p><strong>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 <a href="http://jsfiddle.net/LTJe6/15/" rel="nofollow">demo</a></strong></p>

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