Question

我正在制作一个旋转木马，中心图像需要全彩色，旋转木马中的所有其他图像都是去饱和的。

我想要实现这一目标的方法是让<img>和该图像的去饱和<canvas>绝对位于<li>之上。然后当幻灯片处于活动状态时，画布淡出，显示其后面的彩色幻灯片。当从该li中删除活动类时，画布会淡入。

我有jquery滑块工作，添加和删除li的类，两个图像定位很好，但画布没有褪色。我尝试过各种各样的方法，但我的jquery知识并不是那么好，并且没有产生任何结果。有什么建议吗？

我的标记基本上是这样的：

<ul>
    <li>
        <canvas />
        <img />
    </li>
    <li class="active">
        <canvas />
        <img />
    </li>
    <li>
        <canvas />
        <img />
    </li>
</ul>

Answer 1

您可以使用.fadeOut()和.fadeIn()淡入/淡出画布元素。类似的东西：

$('ul').find('canvas').fadeIn().filter('.active').fadeOut();

如果你想使用CSS进行动画淡入/淡出，那么你可以使用CSS3过渡来获得不透明度，然后为活动类设置不透明度。

canvas {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
.active {
    opacity: 0;
}

我通常使用Modernizr检查用户浏览器对CSS3过渡的兼容性。

如果一个元素有活动类，则fadeOut一个子图像

1 个答案: