jQuery fadeOut()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery fadeOut()

The jQuery fadeOut() method is used to fade out the element.

Syntax:

  1. $(selector).fadeOut();  
  2. $(selector).fadeOut(speed,callback);   
  3. $(selector).fadeOut(speed, easing, callback);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of fadeOut() effect.

Let's take an example to demonstrate jQuery fadeOut() effect.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("button").click(function(){  
  8.         $("#div1").fadeOut();  
  9.         $("#div2").fadeOut("slow");  
  10.         $("#div3").fadeOut(3000);  
  11.     });  
  12. });  
  13. </script>  
  14. </head>  
  15. <body>  
  16. <p>See the fadeOut() method example with different parameters.</p>  
  17. <button>Click to fade out boxes</button><br><br>  
  18. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
  19. <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
  20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
  21. </body>  
  22. </html>   

Test it Now

Output:

See the fadeOut() method example with different parameters.

Click to fade out boxes