jQuery fadeIn fadeOut"眨眼;在Chrome上，在FireFox和IE上运行良好

jQuery fadeIn fadeOut "blink" on Chrome, works fine on FireFox and IE

本文关键字：FireFox IE 运行 Chrome fadeOut fadeIn quot 眨眼 jQuery      更新时间：2023-09-26

请在此处查看我的代码：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;
}

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

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

工作Fiddle

我不认为将CSS3动画与jQuery动画相结合是个好主意。下面的代码可能会有所帮助，只需简单地使用jQuery fadeIn和fadeOut即可。

var $body = jQuery('body')
$body.fadeOut(1000, function () {
    $body.fadeIn(1000); 
});
相关文章：