如果有关于此的类似问题,请指出我的方向.这个问题很难描述,但我会尽我所能：
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转换？
解决方法
我已经遇到过与cycle2类似的问题
将.cycle-slide-active更改为：
将.cycle-slide-active更改为：
body.loaded .cycle-slide-active {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
因此,在使用auto init准备好的cycle2之后,效果将是文档加载.
在文档加载
$('body').addClass('loaded');
示例：http://jsfiddle.net/e70r1mtw/3/
您还可以使用循环初始化的event在要激活过渡的任何位置添加类.