jquery -fadeIn/fadeOut在滚动时闪烁

我正在使用下面的代码来实现它的父div的滚动/展开的淡入/淡出效果。jquery -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（）和动画不透明度有什么区别？

来源

2011-08-24 Finnnn

只需使用您在那里的动画示例。检查这里回答为什么：http://stackoverflow.com/questions/5967313/jquery-fade-flickers – Luwe

很酷的感谢。显示：没有一点麻烦。我认为淡入淡出的功能从来不打算用于我希望它们。 – Finnnn

有趣。我不知道jQuery知道发生了什么，但我肯定可以重现这个问题（[jsFiddle here]（http://jsfiddle.net/gothick/TFhzE/）。） –

我已经把我的答案从这里的评论：

只需使用你那里有生命的例子。请点击此处查看淡出动画为何如此表现的答案： jQuery fade flickers

来源

2011-08-24 11:12:44 Luwe

如前所述，这是因为它们修改了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();}); 
});

自己完全隐藏它，一旦它实际上是完整的。

来源

2011-08-24 11:14:11 Matt

jquery -fadeIn/fadeOut在滚动时闪烁

回答

相关问题