Jquery – 翻转时fadeIn / fadeOut闪烁

我正在使用以下代码来实现对其父div的翻转/转出的fadeIn / fadeOut效果。

$('.rollover-section').hover(function(){ $('.target', this).stop().fadeIn(250) }, function() { $('.target', this).stop().fadeOut(250) }) 

当我翻转div并慢慢退出时，它可以正常工作。 但是，如果我将鼠标快速移动然后快速离开div，则会破坏效果。 目标div似乎陷入0和1之间的不透明度。

令我困惑的是，当我使用以下代码时，它完美地运行。

 $('.rollover-section').hover(function(){ $('.target', this).stop().animate({ opacity: 1 }, 250); }, function() { $('.target', this).stop().animate({ opacity:0 }, 250); }) 

所以，我有两个问题。

1 – 为什么我的第一个代码块表现如此？

2 – fadeIn（）/ fadeOut（）和不透明度动画有什么区别？

Answer 1

我从这里的评论中得到了答案：

只需使用您在那里的动画示例。 在这里查看淡入淡出动画为何如此表现的答案： jQuery淡出闪烁

Answer 2

正如已经说明的那样，因为那些修改了css并将显示更改为none。 通过使用fadeTo你可以获得相同的效果，但它不会修改css，所以它应该正常工作。

更新示例： http ： //jsfiddle.net/TFhzE/1/

你也可以

 $('.rollover-section').hover(function() { $('.target', this).stop().fadeTo(0,250); }, function() { $('.target', this).stop().fadeTo(250,0,function(){$(this).hide();}); }); 

一旦实际完成就完全隐藏它。