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

如果对此有类似的问题，请指出我的方向。我很难描述这个问题，但我会尽力而为:

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%);
  }

我的问题是:有没有一种方法可以在不立即添加cycle-slide-active类的情况下初始化Cycle2，从而使浏览器有时间意识到它需要执行CSS转换？

最佳答案

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

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

因此，在自动初始化准备就绪的cycle2之后，结果将对文档加载产生影响。

载入文件时

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

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

您还可以使用cycle-initialized event在要激活转换的任何位置添加一个类。