jQuery fadeTo()

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

jQuery fadeTo()

jQuery fadeTo() method is used to fading to a given opacity.

Syntax:

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

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

opacity:It specifies the opacity. The opacity value ranges between 0 and 1.

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 fadeToggle() effect.

Let's take an example to demonstrate jQuery fadeTo() 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").fadeTo("slow", 0.3);  
  9.         $("#div2").fadeTo("slow", 0.4);  
  10.         $("#div3").fadeTo("slow", 0.5);  
  11.     });  
  12. });  
  13. </script>  
  14. </head>  
  15. <body>  
  16. <p>See the fadeTo() method example with different parameters.</p>  
  17. <button>Click to fade 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 fadeTo() method example with different parameters.

Click to fade boxes