My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing.
First things first, download jQuery. Grab the Production minified version off of their site. Next, get two images. I used the following.
Add the jQuery script between your head tags.
Here is the function.
Here is the CSS.
And here is the body code.
All together you got something that looks like this.
jQuery Hover Effect 
Test it out below:
NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.
