Fading Image effect using jQuery

In today's post, You will see a very interesting and attractive fading effect on images. I am talking about is to fade all the other images, except the image which have the focus. To see the effect, take mouse on the follow us images (Facebook, twitter etc..) on my blog and check out the fading effect. Did you like it? Let's see how this is implemented.



HTML


The HTML structure contains images are wrapped with <a> tags and which are wrapped in main container <div> tag.
<div id="dvImg">
   <a href="URL To Visit on Click" target="_blank">
     <img border="0" width="55px" height="55px" src="Source of image" />
  </a>
  <a href="URL To Visit on Click" target="_blank">
     <img border="0" width="55px" height="55px" src="Source of image" />
  </a>
</div>​

jQuery Code


  • Bind a hover function on all element of the a (hyperlink) within the div. The .hover method bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
  • So on mouseenter handler, change the opacity of all the images except selected image. To exclude current image, use .not() method.
  • And on mouseleave handler, Change opacity to 1 for all the images.
$(document).ready(function() {
    $('#dvImg a').hover(function() {
        $('#dvImg a img').not($('img', this)).stop().fadeTo(250, '0.3');
    }, function() {
        $('#dvImg a img').stop().fadeTo(250, '1.0');
    });
});​
See result below


Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..