Question

我正在使用以下代码在其父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

正如已经说明的那样，因为那些修改了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();});
});

在实际完成后自己完全隐藏它。

Answer 2

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

只需使用您在那里的动画示例。在此处查看淡入淡出动画的行为方式的答案： jQuery fade flickers

Jquery - 翻转时fadeIn / fadeOut闪烁

2 个答案: