Creating a Mouseover Fade Effect with jQuery

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.
cbavota-bwcbavota


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.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie