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.
Add the jQuery script between your head tags.
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script> |
Here is the function.
<script type='text/javascript'> $(document).ready(function(){ $("img.a").hover( function() { $(this).stop().animate({"opacity": "0"}, "slow"); }, function() { $(this).stop().animate({"opacity": "1"}, "slow"); }); }); </script> |
Here is the CSS.
<style> div.fadehover { position: relative; } img.a { position: absolute; left: 0; top: 0; z-index: 10; } img.b { position: absolute; left: 0; top: 0; } </style> |
And here is the body code.
<div class="fadehover"> <img src="cbavota-bw.jpg" alt="" class="a" /> <img src="cbavota.jpg" alt="" class="b" /> </div> |
All together you got something that looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery Hover Effect</title> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript'> $(document).ready(function(){ $("img.a").hover( function() { $(this).stop().animate({"opacity": "0"}, "slow"); }, function() { $(this).stop().animate({"opacity": "1"}, "slow"); }); }); </script> <style> div.fadehover { position: relative; } img.a { position: absolute; left: 0; top: 0; z-index: 10; } img.b { position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="fadehover"> <img src="cbavota-bw.jpg" alt="" class="a" /> <img src="cbavota.jpg" alt="" class="b" /> </div> </body> </html> |
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.
Excellent! I’ve been trying to work this out for ages! And the tutorial was so easy to follow. I will now look for your other posts!
I like this script very much!
I’m looking for a way to realize a gallery using previous – next – play – buttons. Each photo should start in B/W and fade to color using a timer value. Showing a text below the picture (without fading) would be great. Do you know any gallery script that can do that – with some small additional programmings ?
Do you mean there is a chance to work with only one color photo at a time ?
Hi there – great piece of code and really nice effect! I have been looking for something similar to this – is there a way that when you rollover the image, you can have 2 hotspots (ie 2 different links)? I have been wrecking my brain to try and find a solution!
Thanks!
Kerry
Hey, this is great.
I am trying to center it, though. I know that absolute positioning is req’d in order to make the images display on top of each other, but would it be possible to center-align the “fadehover” tag?
I am new to this stuff, so I’m sorry if this is newbie stuff, but I couldn’t find a sol’n online.
Thanks,
JOB
thank you! you are a credit to the web.
bit of an issue tho, the image fades out, but then doesnt fade back, any ideas? sorry i cant publish the page yet.
ta
mike
Make sure you have pasted the code exactly as it is above. If you have, then I don’t see why the fade in/out would not work properly.
Excelent Job mate, thank you!
Thanks for the nice jQuery tutorial! I wanted to create a menu button hover effect that was more interesting than the CSS hover and this is a great example of how easy it is to achieve that. Thanks again!
Thanks for the rollover. I’ll be using this in my next project. Cheers.
I’m using this code in 3 side-by-side “nav” divs. The page must also include prototype.js. (necessary to client) The script will run the first time I roll over an image, but fails to run after that. Any suggestions?
I want to use your great tutorial on my wordpress blog, i have a question, in which file do i put the script?
$(document).ready(function(){
$(“img.a”).hover(
function() {
$(this).stop().animate({“opacity”: “0″}, “slow”);
},
function() {
$(this).stop().animate({“opacity”: “1″}, “slow”);
});
});
Thanks a lot!
Cheers..
Usually it would be header.php
I have copied the code down and all seems to work fine, but when i add a link onto the page, the link does not work, if i remove one of the image rollovers the link works. Any ideas how to fix this?
Are you adding a link to the images or somewhere else on the page?
Thanks…I‚Äôll be using this in my next project
nice, but is there a simple solution for when i move the mouse more than once to the image and it keeps animating when i left the are with the cursor
hola!
Nice tutorial! is there a way to hide the images on body ready (load)?
Thanks so much for the great tutorial!
One note, in WordPress you don’t need to replace all the $ signs with the word jquery – you can just wrap the whole thing in this function:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
Nice! Thanks for the straight forward tutorial, works like a charm. Is there an easy way to link the images?
Nice work, linking images work too! Love the positioning you created, very crafty. A must use in a project, thank u mucho!
i had idea to form menu by using this effect . but it is not supporting for multiple image on same page . it is working for only one set . what to do . help me
Excellent – thanks very much for this tidy way of doing this.
This is great! Thanks!
I’m having trouble applying this to multiple objects though. Can I use the same function, classes etc on another div to have this same effect on another image?
Using the same code multiple times should work for you. But you must use the same div container name, or make sure that the new div container has
position: relative;set.I am trying to have several images next to eachother, but for some reason they keep stacking on top of each other. I’ve tried adding divs to clear the space between but without luck. What is the best way to have it so the images lay in a row next to eachother?
Hi Guys, am trying to do the same effect for background image, i have a div in its class it have a bg image, when mouse over am changing the class of the div (class with the glow bg image), however am not able to see this animated thing… it just changes like no smoothness… i tried fade, animate couldn’t success, any idea guyz?
Hey just thought I’d let you know I am using (and greatly appreciate) this code. I did however tweak it.
Semantically I did not really like having two img tags for one image, so I put a background on the one img’s containing element.
I think this slightly leaner and cleaner:
hmmm I guesse that pre – /pre code block doesn’t allow HTML. Oh well thats what an imagination is for.