jquery – 鼠标悬停效果bugging

我有鼠标悬停效果的问题.我的代码低于 jsfiddle link

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

如果将鼠标放入和放出几次并离开,效果会持续一段时间.
我想要的是直到第一个鼠标悬停效果完成我不想继续保持效果一段时间.
如果你不明白这一点,请问我.

谢谢你的时间,我在下面找到一个简单的方法
只需使用淡入淡出功能而不是淡入淡出即可.
这是代码和demo

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

解决方法

要为您自己的解决方案添加一些上下文：

.fadeIn()和.fadeOut()修改display属性(分别在block和none之间切换).

使用fadeto()将仅修改透明度,省略需要完成可见和不可见之间转换的元素的行为.因此,.stop()将按预期运行.

另外,使用.stop().fadeto()将得到与使用相同的结果：

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