Mar
15
2010

Using jQuery for a Simple Animated Fade Effect

by   |  Posted in Tutorials  |  13 comments

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:

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , , , , , , , , , , , , ,

Short URL: http://bit.ly/9K9qRd

Discussion 13 Comments

  1. Ivor on March 16, 2010 at 10:42 am

    Quick and effective :) thanks!

  2. peter on March 16, 2010 at 11:22 am

    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.

  3. covalic on March 16, 2010 at 6:13 pm

    I am impressed. Thank you very much for this tutorial.

  4. Week N Review on March 19, 2010 at 5:28 pm

    Thanks my website now uses the effect!! A++++

    Week N Review

  5. Economic Crisis on March 22, 2010 at 11:38 am

    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…

    • c.bavota on March 24, 2010 at 10:18 am

      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.8 and the 1 in the jQuery above.

  6. Matt on July 8, 2010 at 8:56 am

    Is there anyway this same effect could be achieve but in place of the opacity change, desaturate the image to greyscale?

  7. Katia on August 3, 2010 at 3:12 pm

    Had to work around to make it look same in IE

  8. dji on August 27, 2010 at 6:04 pm

    Hey, works great, thanks for sharing because you saved me a heck of a lot of time!

  9. Mirco on December 21, 2010 at 10:31 am

    Great script, my Photoplo uses now the effect!
    http://www.shutter-speed.ch/photoblog/?category_name=archive

    Thanks for sharing!

  10. Mich on December 21, 2010 at 8:01 pm

    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?