渐变时FlexSlider断断续续/滞后

FlexSlider stutter/lag on fade

本文关键字：滞后 断断续续 FlexSlider 渐变      更新时间：2023-09-26

我在以下测试页面上使用Flexslider（支持jquery 1.4.8的旧版本1.0）：http://www.showstyle.lu/service/startv2/

正如您所看到的，滑块在左上角和右下角的图像上实现（在内容的上部）。当我通过dreamweaver离线测试时，没有卡顿效果或滞后效果，但在chrome/ffirefox/opera中，渐变效果开始了，但随后以一种相当尴尬的方式进入下一张幻灯片。

它看起来不平滑，在IE中它一点也不褪色，但没关系，它毕竟是IE（rip IE）

我浏览了Stackoverflow和谷歌上的许多页面，人们提到这主要是Firefox中与浮动相关的问题，在Chrome中很少发生。

我看了看我的滑块，检查了他们&取消了css中的各种类，看看它是否会影响滑块的流动性，但到目前为止运气不佳，所以我无法真正确定干扰滑块的代码。

有处理这个问题的经验吗？

提前感谢！

我不确定这会有帮助，但在您的style.css中，您有一段用于滑块转换的代码：

* {
-moz-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
transition: opacity .25s ease-in-out; */
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity 3s ease-in-out; */

}

通过删除底部的3个属性，我能够在滑块上获得更平滑的过渡（通过检查元素和编辑CSS来实现）。因此，如果CSS的这一部分只是这样的：

* {
-moz-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;

我想你会得到你想要的更平稳的过渡。（这是在Chrome中完成的，没有测试过其他浏览器）。

相关文章：