javascript - FlexSlider 卡顿/淡入淡出滞后

Question

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

如您所见， slider 是在左上角和右下角的图像(在内容的上部)上实现的。当我通过 Dreamweaver 离线测试时，没有出现卡顿效果或滞后效果，但在 chrome/firefox/opera 中，淡入淡出效果开始出现，但随后以一种非常尴尬的方式冲入下一张幻灯片。

它看起来不平滑，在 IE 中它根本不褪色但是没关系，毕竟是 IE(rip IE)

我查看了 Stackoverflow，谷歌上的很多页面都提到这是一个主要在 Firefox 中与 float 相关的问题，在 Chrome 中出现的次数并不多。

我查看了我的 slider 并检查了它们并取消了 css 中的各种类以查看它是否会影响 slider 的流动性但到目前为止运气不好所以我无法真正查明干扰 slider 的代码。

有处理这方面的经验吗？

提前致谢!

Answer 1

我不确定这是否有帮助，但在您的 style.css 中，您有这段用于 slider 过渡的代码:

* {
-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 个属性，我能够在您的 slider 上获得更平滑的过渡很多(通过检查元素和编辑 CSS 做到这一点)。因此，如果您的 CSS 的这一部分是这样的:

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

我认为您会得到您正在寻找的更平稳的过渡。 (这是在 Chrome 中完成的，尚未测试其他浏览器)。