javascript - jQuery fadeIn fadeOut "blink"在 Chrome 上,在 FireFox 和 IE 上工作正常

标签 javascript jquery html css google-chrome

请在此处查看我的代码: 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 引起的。删除持续时间 css,一切都会完美运行。

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

Working Fiddle

关于javascript - jQuery fadeIn fadeOut "blink"在 Chrome 上,在 FireFox 和 IE 上工作正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20561669/

相关文章:

javascript - 在 Asp.Net mvc 4 中使用 AJAX 提交表单

javascript - 使用 React 和 react-fa 在输入文本背景上动态放置一个 Font Awesome 图标

javascript - jQuery - 引用附近的元素

java - 使用 GWT ScriptInjector 加载脚本时如何设置 CacheHeaders?

javascript - 从请求响应创建 PDF 不适用于 axios 但适用于 native xhr

javascript - 来自 JS Fiddle 的 JS 在浏览器测试中不起作用

javascript - 如何在 jquery 中更改 bootstrap glyphicon 颜色

java - 在 Android 中抓取 Html

html - 在图像上叠加文本

javascript - 将 svg 图像的 Base 64 定义移动到外部文件中