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

因此，在自动初始化准备就绪的周期 2 之后，效果将影响文档加载。

文档加载时

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

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

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