In this article, we will explain how to use fadeTo() method in jQuery with example.

jQuery fadeTo() method is used to adjust the opacity of the html element.


$(selector).fadeTo(speed, opacity);  
$(selector).fadeTo(speed, opacity, callback);   
$(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.

<!DOCTYPE html>
<html xmlns="">
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
        $(document).ready(function () {
            $("#btnFadeTo").click(function () {
                $("#divFadeTo").fadeTo("slow", "0.20");
    <input type="button" id="btnFadeTo" value="Fade To" /><br /><br />
    <div id="divFadeTo" style="width:200px;height:80px;background-color:red;">


use fadeTo() method to Adjust opacity of element in jQuery

After clicking to fade to button then change the opacity of the div shown as below figure:

use fadeTo() method to Adjust opacity of element in jQuery

I hope it will help to you after reading.


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like