Using jQuery for a Simple Animated Fade Effect
by c.bavota | Posted in Tutorials | 14 comments
Mar
15
2010
I know I have already done a fade effect between two images with jQuery, but here is a quick little piece of code that will just add a nice animated fade effect to single images. Whenever a person hovers over an image, we will use jQuery to lower the opacity to make it appear lighter. Easy and not that impressive but still pretty cool.
Make sure you first call jQuery.
<script type='text/javascript' src='jquery.js'></script>
Then just add the following code and all your images will have a slight fade when you hover over them.
<script type="text/javascript">
$(document).ready(function(){
$("img").hover(function() {
$(this).stop().animate({opacity: "0.8"}, 'slow');
},
function() {
$(this).stop().animate({opacity: "1"}, 'slow');
});
});
</script>
If you only want this to occur on certain images than just make sure to change the first jQuery selector to the class name of the images your want this effect to affect.
Try it out below:
Quick and effective
thanks!
I think almost the same query is being used in pic advertising these days as when you hover the cursor on any pic it just lightens up and an ad appears over it.
I am impressed. Thank you very much for this tutorial.
Thanks my website now uses the effect!! A++++
Week N Review
how can i invert the effect? i want the fading effect first and when i hover the image i want to see the original image, it will be great if this can be done…
You would need to setup some CSS first. Something like this:
img.fade { opacity: 0.8; filter: alpha(opacity=80); }Then you would just swap the
0.8and the1in the jQuery above.Is there anyway this same effect could be achieve but in place of the opacity change, desaturate the image to greyscale?
That is possible but you would have to use two images and a technique like this one: http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
that’s what I thought. I was somewhat hoping there was an image manipulation ability with jQuery to do it on the fly.
Had to work around to make it look same in IE
Hey, works great, thanks for sharing because you saved me a heck of a lot of time!
Great script, my Photoplo uses now the effect!
http://www.shutter-speed.ch/photoblog/?category_name=archive
Thanks for sharing!
This works fine for my site, but have a problem.
If I use this with a gallery image thumbnail that links to another page, then use the Fire Fox browser back button the thumbnail is still greyed out. I have to then move the mouse over the thumbnail image to reset to the original opacity.
Does not do this in IE 7, any ideas on updating image when using the back button?