Cheap VPS & Xen Server

Residential Proxy Network - Hourly & Monthly Packages

jQuery fadeOut()

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


  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=“”></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


See the fadeOut() method example with different parameters.