Post
Ask Question

Fade In and Fade Out Effect on Image Using JQuery

By using Js/jQuery we can animate with the images. In this we are going to implement fade in/fade out effect using jQuery.

Step 1: Add jQuery CDN in your page:

  1. <head>  
  2.     <meta charset="utf-8" />  
  3.     <title></title>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. </head>  
Step 2: Add appropriate CSS in the page. Better ways to create css file externally and include it in your page.
  1. <style>  
  2.     .img_outer {  
  3.         width: 310px;  
  4.         height: 344px;  
  5.         position: relative;  
  6.         float: left;  
  7.         margin: 10px;  
  8.     }  
  9.       
  10.     .img_outer img {  
  11.         position: absolute;  
  12.         z-index: 1;  
  13.         cursor: pointer;  
  14.     }  
  15.       
  16.     .img_blur {  
  17.         opacity: 0.84;  
  18.     }  
  19. </style>  
Step 3: Now add multiple images in the page. So that we can implement this effect on multiple images.
  1. <body style="height: 1000px">  
  2.     <div class="list_leftp">  
  3.         <div class="img_outer">  
  4.             <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
  5.         </div>  
  6.         <div class="img_outer">  
  7.             <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
  8.         </div>  
  9.         <div class="img_outer">  
  10.             <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
  11.         </div>  
  12.         <div class="img_outer">  
  13.             <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
  14.         </div>  
  15.     </div>  
  16. </body>  
Data-hr attribute is defined for assigning link to <a>. Read the concept of data attribute for more detail.

Step 4: Now main step, we have to write j Query script for implementing effect.
  1. <script type="text/javascript">  
  2.     $(document).ready(function(e)  
  3.     {  
  4.         $('img').hover(function()  
  5.         {  
  6.             $('.img_outer img').addClass('img_blur');  
  7.             $(this).removeClass('img_blur').animate(  
  8.             {  
  9.                 'left': '-10px',  
  10.                 'top': '-10px',  
  11.                 'width': '330px'  
  12.             });  
  13.         }, function()  
  14.         {  
  15.             $('.img_outer img').removeClass('img_blur');  
  16.             $(this).animate(  
  17.             {  
  18.                 'left': '0',  
  19.                 'top': '0',  
  20.                 'width': '310px'  
  21.             });  
  22.         });  
  23.         $(document).on('click', 'a', function(event)  
  24.         {  
  25.             var x = $(this).attr('data-hr');  
  26.             $(this).find('img').fadeOut(700).fadeIn(700, function(event)  
  27.             {  
  28.                 window.open(x, "_blank");  
  29.             });  
  30.             event.preventDefault();  
  31.         });  
  32.     });  
  33. </script>  
Now I am going to explain this code.

On hower event of an Image img_blur class is added for opacity for an image. After this step, left, top and width properties are set to animate an image.

Once these properties are set, remove that particular class and reset all those properties to their default values.

Remaining lines of code is for redirection and fade in/fade out effect of an image.

When you click on the image (<a>), value of data-hr attribute is stored in variable x. In the step, we have set time for fade in & fade out effect in milliseconds.

Guys, hope you understand the concept. Please take help from attached code if you require. If you have any query, feel free to contact me.