Jquery - 翻转时fadeIn / fadeOut闪烁 [英] Jquery - fadeIn/fadeOut flicker on rollover

问题描述

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

I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it's parent div.

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

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

It works correctly when I rollover the div and out slowly. However if I move my mouse over and then off the div quickly, it breaks the effect. The target div seems to get stuck at an opacity between 0 and 1.

让我感到困惑的是，当我使用下面的代码时，它可以很好地工作。

What confuses me is that when I use the following code it works perfectly.

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

所以，我有两个问题。

So, I have two questions.

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

1 - why is my first code block behaving as it does?

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

2 - What is the difference between fadeIn()/fadeOut() and animating the opacity?

推荐答案

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

I've put my answer from the comments here:

只需使用你在那里的动画示例。点击此处查看淡入淡出动画为何如此表现的答案：
jQuery fade flickers

Just use the animate example you have there. Check here for an answer to why the fade animation behaves the way it does: jQuery fade flickers

这篇关于Jquery - 翻转时fadeIn / fadeOut闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！