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

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


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


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.


One response

  1. […] alternative is to have two elements one transparent on top which has the end color and use a jquery fade […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: