Javascript jQuery fadeIn fadeOut“；眨眼；在Chrome上，在FireFox和IE上运行良好

请在此处查看我的代码：

我想让这东西淡出然后淡入。它在Firefox和IE上运行得非常完美，但在Chrome上显示出一种奇怪的“闪烁”。 我已经使淡出和淡出尽可能简单。但似乎没有什么原因

HTML:

CSS:

---

该问题是由于为

.fadeIn

添加的动画持续时间css引起的。删除css，一切都会完美工作

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

---

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

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

---

请检查：您为什么需要.fadeIn类？我将删除CSS中的

.fadeIn

。@Turgut:谢谢您的评论。这是为Chrome设计的。虽然我删除了它，但它仍然不能像Firefox中那样正常工作。根据你的JSFIDLE，你的浏览器在一开始时仍然会闪烁，但在Firefox中不会。请在Firefox和Chrome中查看您的小提琴。你会看到区别：在Chrome中，它一开始会闪烁一次，就像在Firefox中一样，它直接从“淡出”开始。谢谢你的想法。但根据您的JSFIDLE，您的浏览器在一开始时仍然会闪烁，但在Firefox中不会。请在Firefox和Chrome中查看您的小提琴。你会看到不同之处：在Chrome中，它一开始会闪烁一次，就像在Firefox中一样，它直接从“淡出”开始。这是因为dom先被加载，然后淡出淡入。如果你删除js代码，你甚至会发现内容会闪烁。但在Firefox中不会发生这种情况。为什么呢？谢谢你的帮助@Milind Anantwar不管怎样，这很有帮助。谢谢@Milind anantwart谢谢你的建议。虽然我使用的是纯jQuery fadeIn和fadeOut，但它在Chrome中开始“fadeOut”之前仍会闪烁一次，而在Firefox中则不会。你删除了css吗？在尝试之前删除css，因为css会影响动画@乔安妮：是的。在Chrome和Firefox中看到它，你就会看到不同之处。如果您错过了Chrome中的第一次闪烁，请重新运行它。@Joanne Remove

.addClass（'fixed-top fadeIn'）

，然后重试。和

fadeIn

应该在回调函数中，而不应该在链中调用？它在开始时仍会在Chrome中闪烁。

.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;
}

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

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