Mar
15
2010

Using jQuery for a Simple Animated Fade Effect


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:

If you liked this, please share it.

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

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

Discussion 11 Comments

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

    Quick and effective :) thanks!

    Reply
  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.

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

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

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

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

    Week N Review

    Reply
  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…

    Reply
    • 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?

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

    Had to work around to make it look same in IE

    Reply
  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!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*


To enter code in the comment box, please place it between <pre lang="php"> </pre> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.