鼠标悬停效果bug答案

【问题标题】：Mouse hover effect bugging鼠标悬停效果bug
【发布时间】：2012-03-26 06:30:35
【问题描述】：

我遇到了鼠标悬停效果的问题。我的代码在下面和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);
});

【问题讨论】：

显示/隐藏功能不是很好而不是淡入/淡出吗？使用显示/隐藏时效果更好。
我知道你的意思，但你不会得到像淡入淡出这样的效果。

标签： jquery

【解决方案1】：

http://jsfiddle.net/LTJe6/8/

我已经对其进行了修改，以便在您进入孩子并将不透明度设置为 1 时停止动画

   $(this).children('.second').stop().css({'opacity': 1});
   $(this).children('.second').fadeIn('500');

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

试试这个代码。

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

【讨论】：

【解决方案4】：

您可以防止动画队列建立。只需在再次制作动画之前调用.stop() 方法。您甚至可以实现类似hoverIntent plugin 的方法，它可以在运行动画之前添加一点延迟。但是，这个插件不会立即调用 onMouseOver 和 onMouseOut 函数，而是跟踪用户的鼠标 onMouseOver 并等待直到它变慢才调用 onMouseOver 函数...并且它只会在调用 onMouseOver 后调用 onMouseOut 函数。

【讨论】：