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

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

In this article, we are going to discuss the steps to select image elements using jQuery and apply fading effects to those images.

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

<script src="https://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 a ready event; which is generated by web browsers when the document is completely loaded. The code for this looks like this 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 the 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 that is matched with the given ID. But we need to select all image elements as per our requirement, so the code would look like below:

jQuery("img");

The 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 returned by the selectors. I am going to use .fadeOut and .fadeIn functions to apply animation effects.

Let’s have a look at these functions.

.fadeOut function is used to fade 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 that determines which transition function to use; these functions will control the animation. the 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 the same. But .fadeIn fades the matched elements to opaque. That means .fadeIn will display the matched elements; whereas the .fadeOut function will hide the matched elements.

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

jQuery("img").fadeOut();

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

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

Step 6. Now we should place some images on the page. The main purpose of this article is to select images and apply some effects. Hence <img> tags must exist on the page.

Altogether here is the HTML code.

<html>
  <head>
     <script src="https://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 to the images. Note that the images (you can edit this HTML file with your own image file names) must exist in the same place where you have saved this HTML file; otherwise, images won’t display on the page.

Below is the screenshot that was taken when fading effects are applied to the images.