鼠标悬停效果bugging

Question

我遇到鼠标悬停效果问题。我的代码位于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);
});

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

试试这段代码。

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

Answer 4

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