Images to turn from grayscale to color one by one

Question

I have 5 images placed in a div, the images are color but I want them to all be grayscaled firstly and then the first 3 to slowly fade into color one by one after the page loads. I've tried to achieve this using various jquery scripts like jQuery grayscale, desaturate, etc. to no success. Can someone please figure it out for me?

Script looks like this:

<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>

I don't have any at the moment, as I tried a few plugins but those aren't working for my particular problem. — Ankur Chauhan, Jul 29 '13 at 08:58

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Set all images to grayscale with .gray class in CSS3

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

Set transition animation to your elements with CSS3
Use .slice(0,3) jQuery method to select first three elements from your
Remove .gray class with pure jQuery

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

BTW. Code won't work in Presto's based Opera. It's a feature limitation of that browser.

edited May 23 '17 at 11:50

Community

1
1

answered Jul 29 '13 at 12:48

Kamil Szymański

950
12
26

Thanks! Got it working temporarily using a hide and show but this is perfect. – Ankur Chauhan Jul 30 '13 at 07:09

Images to turn from grayscale to color one by one

1 Answers1