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> $(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> $(document).ready(function(){ $("img.a").hover( function() { $(this).animate({"opacity": "0"}, "slow"); }, function() { $(this).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> |
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.
Very cool. Thanks for the tut.
I have been using javascript for years and I just find jquery so easy to use. All of its extra features really help make a website more interactive.
I’m looking for something more simple only for fading background colors… but this is really nice, too
10x
I too am trying to find out how to fade background colours.
Awesome! Its a nice collection in my designing knowledge. jQuery is replacing flash animations slowly!
Thank you for the post.
Thank you for your great tutorial. Just 2 points.
In your body code you forgot a closing div.
the fade effect created a black border around transparent (24bit) png files. Perhaps you can add a small code to make that go away without having to use .gif or a 8bit .png.
In IE (7 and
That would make a great code into an excellent code.
Thanks for letting me know. I added the missing div. Let me look into that black border issue.
Nice piece of code.
Try putting “.stop()” before “.animate()” to prevent the animation from getting in a loop.
Again: awesome stuff.
hi,
i believe you have explained well enough for a person using web language.
well i am merely a motion graphic designer… and i am trying to make my website through wordpress… and i like the idea of doing it myself.. its fairly a simple one..
i have a page where i have icons and links on them which enables a video to play on a shadowbox.(through a plugin)
i now need this effect on mouseover on the icons…
so i need to know where should i need to paste this codes (well to begin with there are plenty of them
would you please be kind enough to explain it w.r.t wordpress codes. i would be grateful
ragards
manojit
This is fabulous! I’ve been trying to figure out a way to animate a before and after effect for multiple images and this works perfectly. Thanks for the great tutorial!
GREAT!! This is almost exactly what I need.
What I want to do is to have multiple rows and columns of thumbnails that are black and white which fade to color as you mouseover each of them… is there a way to modify the code so that the color image will always be directly under the black and white image without setting the position of the black and white image?
Thanks,
Steve
If you want an image to appear below another image you will always have to set the position or else they will appear next to each other.
Did anyone solved tha god damn IE black border on animated transparent png-s (24bits)!? Thanks a loooooot for any clue.
There are some solutions I have come across online but I haven’t really tried any out.
This one sounds good.
http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/
Hi.
This bit of code is great. I’m attempting to use the fade as a background behind some image and text divs (set to a z-index higher than the fadehover) but every time i roll over the image or text the fade changes back to it’s original state.
http://www.diluterecordings.com/2009/
Is there a fix for this so that the box stays highlighted while the mouse is over any area of the box?
Thanks,
neil
Make sure you have added the .stop() before the .animate() function.
what if I want to add more colors (same image other color) and make each mouseover show another color in an order (not randomized)? how would that work?
Hi…
can i use this jquery mouse over effect with lightbox. I want the same effect and when i click on the image it should open it in lightbox.
But it’s not working…please help me asap
Thanks in advance
Hi and thanks putting up this tutorial!
First of all, i’m in no way a webdesigner/coder/programmer. I’m “messing around” with Wordpress myself and doing what i can. The “official” site is being developed by a coder as we speak. Till then i wanted to run a Wordpress site.
Ontopic: I’ve applied your tutorial to my site and actually it worked right away. And being a no-coder as i said, i had a little party but to know minutes later the party was over…
On this page of my site you can see it’s working:
http://www.rawkidrocks.com/props
On this page however you can see i’m having some issues:
http://www.rawkidrocks.com/dummy
As you can see, i’m trying to put several images underneath eachother, but they are overlapping.
I’m guessing it has nothing to do with your css or jquery codes, but i hope you don’t mind asking you anyway. My guess is there’s something wrong with my styling or. So. Could you please have a look at this? I really hope you can help me out here.
Regards,
Johnny
I would suggest settings the width and the height in your CSS so that each fadehover div does not overlap the other.
Thanks! I feel so stupid, knowing now it was something that “simple”. But then again, i don’t know anything about coding. Thanks again and keep up the great job!
Johnny
Hi I tried different fixes for the IE black border issue but it didnt work.. Could you please post your possible solution
There are some solutions in this post that seem to work.
http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem
Have you tried any of them?
I encountered a problem with your code, if I move the mouse over and away from the element repeatedly and quickly it will continue blinking for about 10secs to come after you have stopped moving the mouse. is there a fix for this?
It wasn’t with the code, it was with the demo. I just forgot to update the demo code with
.stop().