jQuery fadeIn fadeOut 在 Chrome 上“闪烁”，在 FireFox 和 IE 上运行良好答案

【问题标题】：jQuery fadeIn fadeOut "blink" on Chrome, works fine on FireFox and IEjQuery fadeIn fadeOut 在 Chrome 上“闪烁”，在 FireFox 和 IE 上运行良好
【发布时间】：2013-12-13 16:22:31
【问题描述】：

请在此处查看我的代码： http://jsfiddle.net/gt4Rj/

我想让它淡出然后淡入。它完美地工作，就像我希望它在 Firefox 和 IE 上一样。但它在 Chrome 上显示了一个奇怪的“闪烁”。我已经让 fadeOut 和 fadeIn 尽可能简单。但似乎没有什么原因。

HTML：

<body>
    bbbbbbb
</body>

JS：

jQuery('body')
.addClass('fixed-top fadeIn')
        .fadeOut(1000).fadeIn(1000);

CSS：

.fixed-top {
  background:transparent;
  overflow: hidden;
  z-index: 10;

}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}  
  100% {opacity: 1;}
}


.fadeIn {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: backword;
  -webkit-animation-name: fadeIn;
}

【问题讨论】：

请查看：jsfiddle.net/gt4Rj/4 为什么需要 .fadeIn 类？
我将在您的 CSS 中删除 .fadeIn ....
@Turgut：感谢您的评论。那是为 Chrome 设计的。虽然我删除了它，但它仍然不能像在 Firefox 中那样正常工作。根据您的 jsFiddle，您的在 Chrome 中一开始仍会闪烁，但在 Firefox 中则不会。请在 Firefox 和 Chrome 中查看您的小提琴。您会看到不同之处：在 Chrome 中，它一开始会闪烁一次，而在 Firefox 中，它直接从“FadeOut”开始。

标签： javascript jquery html css google-chrome

【解决方案1】：

该问题是由于您为 .fadeIn 添加的动画持续时间 css 引起的。删除持续时间 css，一切都会完美运行。

 .fadeIn {
 -webkit-animation-fill-mode: backword;
 -webkit-animation-name: fadeIn;
}

Working Fiddle

【讨论】：

感谢您的想法。但是根据您的 jsFiddle，您的在 Chrome 中一开始仍会闪烁，但在 Firefox 中则不会。请在 Firefox 和 Chrome 中查看您的小提琴。您会看到不同之处：在 Chrome 中，它一开始会闪烁一次，而在 Firefox 中，它直接从“FadeOut”开始。
发生这种情况是因为 dom 是先加载然后淡出淡入的。如果您删除 js 代码，您甚至会发现内容闪烁。
但它不会在 Firefox 中发生。这是为什么？感谢您的帮助@Milind Anantwar
无论如何，它有帮助。谢谢@Milind Anantwar

【解决方案2】：

我不认为用 jQuery 动画连接 CSS3 动画是一个好主意。下面的代码可能会有所帮助，只需使用 jQuery fadeIn 和 fadeOut。

var $body = jQuery('body')
$body.fadeOut(1000, function () {
    $body.fadeIn(1000); 
});

【讨论】：

感谢您的建议。虽然我使用纯 jQuery fadeIn 和 fadeOut，但它在 Chrome 中开始“淡出”之前仍然闪烁一次，但在 Firefox 中没有。
你删除了你的css吗？在尝试之前删除你的 css，因为你的 css 会影响动画。 @乔安妮
是的。 jsfiddle.net/h3pjb 在 Chrome 和 Firefox 中查看它，您会看到不同之处。如果您错过了 Chrome 中的第一次闪烁，请再次运行它。
@Joanne 删除 .addClass('fixed-top fadeIn') 并重试。而fadeIn 应该在回调函数中，而不应该在链中调用。
你的意思是这样的：jsfiddle.net/pEP27？在 Chrome 的开头，它仍然会闪烁。