初始化Cycle2插件在Windows和OSX上的工作方式不同

Question

如果有类似的问题，请指出我的方向。这个问题我很难描述，但我会尽我所能:

http://jsfiddle.net/e70r1mtw/

用户在这里看到的是由灰度渐变为彩色的图像幻灯片。这在OSX和Windows中的Firefox上工作得很好。(客户端意识到这个效果在IE中不起作用，并且可以接受。)

但是，在Windows上的Chrome中，第一张幻灯片不会从灰度淡出，而是保持颜色。

我怀疑这与如何加载DOM以及如何初始化Cycle2插件有关。

控制这个灰度效果的CSS如下:

   #home-featured .cycle-slide {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        -webkit-transition-property: -webkit-filter;
        -webkit-transition-duration: 4s;
        -webkit-transition-timing-function: ease;
        -webkit-transition-delay: 2s;
        transition-property: -webkit-filter, filter;
        transition-duration: 4s;
        transition-timing-function: ease;
        transition-delay: 2s;
  }
  #home-featured .cycle-slide-active {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
  }

我的问题是:有没有一种方法可以初始化Cycle2而不立即添加cycle-slide-active类，让浏览器有时间意识到它需要制定CSS转换?

Answer 1

我已经在cycle2中遇到了类似的问题将.cycle-slide-active更改为:

body.loaded .cycle-slide-active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

所以效果将在文档加载后，在cycle2就绪与auto init。

文件加载

$('body').addClass('loaded');

示例:http://jsfiddle.net/e70r1mtw/3/

你也可以使用cycle-initialized事件来添加一个类在任何地方你想激活的转换