图像逐个从灰度变为彩色

Question

我有5个图像放在一个div中，图像是彩色的，但是我希望它们首先被灰度化，然后前三个图像在页面加载后逐渐逐渐淡入颜色。我试图使用jQuery灰度，去饱和等各种jquery脚本来实现这一目标，但没有成功。有人可以帮我解决一下吗？

脚本看起来像这样：

<div class="cupImg">
   <img src="img/cup.png" alt="" /><img src="img/cup.png" alt="" /><img src="img/cup.png" alt="" /><img src="img/cup.png" alt="" /><img src="img/cup.png" class="last" alt="" />
</div>

Answer 1

1. 使用CSS3中的.gray类将所有图像设置为灰度。

https://stackoverflow.com/a/4028908/2630208

1. 使用CSS3
为您的元素设置过渡动画
2. 使用.slice（0,3）jQuery方法从
中选择前三个元素
3. 使用纯jQuery删除.gray类

http://jsfiddle.net/8Q39r/1/

顺便说一句。代码在Presto的Opera中不起作用。这是该浏览器的功能限制。