Friday Freebies: A jQuery transform image from black and white to color

First I need two images one color in the background and the second black and white in the foreground.

<div style=”background: url(IMG2.jpg); width:600px; height:400px;”  >
<img src=”IMG2-bw.jpg” width=”600″ height=”400″  class=”fade”/>
</div>

Now I need jQuery …

<script type=”text/javascript” src=”js/jquery.js”></script>

… I’m using a small version with no built in delay function. But I want a 2 second delay; so I’ll do a programing trick and use jQuery fade twice once to unfade (the fade to 1.0 is the delay), then actually fade the black and white so the image blooms into vivid colors.

<!– fade class=”fade” after a delay (first unfade it in 2,000 microseconds AKA 2 seconds; then fade to color over 4 seconds. –>

<script>
$(document).ready(function(){

$(‘.fade’).fadeTo(2000, 1.0).fadeTo(4000, 0.0);

});
</script>

I can not tell you how they manage to change the colors of fireworks so well timed – I can only tell you how to code it on a web page.