Post
Ask Question

JQuery Effects - Fade

In the previous article jQuery Effects, we saw hide, show and toggle effects in jQuery. In this article, we will learn about the fade effects in jQuery. 
 
jQuery fade effect helps us in fading in and fading out the visibility of our HTML component. There are four fade effects in jQuery - fadeIn(), fadeOut(), fadeToggle(), fadeTo().
 
Every fade effect has it's own unique functionality. Let us see how it works. Suppose we have an element which is hidden and we want to display it with the fade effect, we will use the fadeIn(). Now, if we want to hide an element with the fade effect, we will use the fadeOut() method. The fadeToggle() is used to toggle between fade in and fade out. If the element will be originally hidden, on the click of fadeToggle(), it will fade in, if the element is displayed on the screen and we trigger fadeToggle() on it, it will fade out. The fadeTo() is used to fade an element to a particular opacity. The opacity should be between 0 and 1.
 
Let us try an example to get a better understanding of the same. 
  1. <html>    
  2. <head>    
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
  4.   
  5. <script>    
  6.    $(document).ready(function(){    
  7.       $("#fInBtn").click(function(){    
  8.          $("#div1").fadeIn();    
  9.       });    
  10.     
  11.       $("#fOutBtn").click(function(){    
  12.          $("#div1").fadeOut();    
  13.       });    
  14.     
  15.       $("#fToggleBtn").click(function(){    
  16.          $("#div1").fadeToggle();    
  17.       });    
  18.     
  19.       $("#fToBtn").click(function(){    
  20.          $("#div1").fadeTo("slow",0.55);  /* 0.55 is the desired opacity to which the element should be faded */  
  21.       });    
  22.    });    
  23. </script>    
  24.   
  25. </head>    
  26.   
  27. <body>    
  28.     
  29. <button id="fInBtn">Fade In</button>    
  30. <button id="fOutBtn">Fade Out</button>    
  31. <button id="fToggleBtn">Fade Toggle</button>    
  32. <button id="fToBtn">Fade To</button>    
  33.   
  34. <br><br>   
  35.    
  36. <div id="div1">    
  37. This division will be affected when you click any buttons. Initially, fade in won't work as the division is already visible. 
    First try fade out and then fade in and other buttons.    
  38. </div>    
  39.     
  40. </body>    
  41. </html>    
output
Code Explained

In the document ready function, we are checking which button is clicked and calling the respective fade effect method. We are selecting the buttons, using their ID, and then assigning a function to it. Within the function, the division with "div1" ID is selected and the respective fade effect is applied to it. Suppose the Fade Out button is clicked, then the fade out button will be selected and within the function associated to it, the fadeOut() effect method is called.

Please try the above code snippet and try to do variations in the parameters of the fade methods. You can specify "slow" , "fast" and time in the milliseconds as a parameter to the fade effects method and observe the output.

If you face any difficulty in understanding the syntax or event handling, I request you to go through jQuery Syntax and jQuery Events first.