jQuery: How to select image elements and apply fading effects on the images?

Beauty of jQuery framework is, we can easily write and manage large JavaScript code. It made JavaScript more accessible to the developers.

In this article I am explaining the steps to select image elements using jQuery and apply fading effects on those images.

Step 1. Include jQuery script to our source file(s); which enables to start using jQuery script.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>

Step 2. Important thing is we have to make it run our jQuery script when the document is completely loaded. Hence we need to put our jQuery code inside an ready event; which is generated by web-browsers when the document is completely loaded. The code for this looks like below:

        jQuery(document).ready(function(){
            // Place some code here
        });

Step 3. Select the HTML elements on the page through jQuery script. We can use jQuery selectors to achieve this. We can select elements based on their id or properties. Or we can select all elements which are of same type. jQuery selectors will return a single element or multiple elements. To select an element by ID we can use the below statement:

jQuery("#id");

Where id is the ID of the element. jQuery will return a single element which is matched with the given ID. But we need to select all image elements as per our requirement, so the code would be looks like below:

jQuery("img");

Above code will return all img elements.

Step 4. Now we know how to get or select elements using jQuery selectors. This is the time to apply fading effects on the items which are return by the selectors. I am going to use .fadeOut and .fadeIn functions to apply animation effects.

Lets have a look at these functions.

.fadeOut function is used to fading the matched elements to transparent. The syntax of this function is:

.fadeOut([duration] [,easing] [, callback])

Where duration is a number or a string which determines how long the fade effect will run. It is given in milliseconds; higher values indicate slower animations. easing is a string determines which transition function to use; these functions will control the animation. callback is the function to call at the end of the animation.

Observe that these 3 parameters are optional. If nothing is passed, default values will be considered.

.fadeIn function’s syntax is also same. But .fadeIn fades the matched elements to opaque. That means .fadeIn will display the matched elements; whereas .fadeOut function will hides the matched elements.

To apply the fadeOut fading effect on the selected image elements, the code will looks like below:

jQuery("img").fadeOut();

Step 5. When to apply these effects on the images? I want to apply the fading effects on the images, when we click on mouse on the images. So we need to catch mouse click event and place the fading code inside the mouse click event. The code looks like below:

           jQuery("img").click(function(){
              // Place fading code here
           });

Step 6. Now we should place some images in the page. Main purpose of this article is selecting images and apply some effects. Hence <img> tags must exists in the page.

All together here is the HTML code.

<html>
  <head>
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
     </script>

     <script> 
        jQuery(document).ready(function(){
           jQuery("img").click(function(){
              jQuery("img").fadeOut();
              jQuery("img").fadeIn(6000, "linear");
           });
        });
     </script>
  </head>
  <body>
     <img src="Chrysanthemum.jpg" alt="Image - 1" width="30%" height="30%"/>
     <img src="Desert.jpg" alt="Image - 2" width="30%" height="30%"/>
     <img src="Hydrangeas.jpg" alt="Image - 3" width="30%" height="30%"/>
     <img src="Jellyfish.jpg" alt="Image - 4" width="30%" height="30%"/>
     <img src="Koala.jpg" alt="Image - 5" width="30%" height="30%"/>
     <img src="Lighthouse.jpg" alt="Image - 6" width="30%" height="30%"/>
     <img src="Penguins.jpg" alt="Image - 7" width="30%" height="30%"/>
     <img src="tulips-1.jpg" alt="Image - 8" width="30%" height="30%"/>
     <img src="Tulips.jpg" alt="Image - 9" width="30%" height="30%"/>
  </body>
</html>

Save this code into an HTML file (“sample.html”) and open it in the web-browser. Once the page is loaded, you are ready to test the fading effects. Click on any of the images and you will see how fading is applied on the images. Note that the images (you can edit this HTML file with your own image file names) must exists in the same place where you have saved this HTML file; otherwise images won’t display on the page.

Below is the screenshot which takes when fading effects are applying on the images.

jQuery - Fading effects on the images

jQuery – Fading effects on the images

Enjoy the beauty of jQuery.

.Paul.

Leave a Reply