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>Example of jQuery fadeTo method</title>
    <script type="text/javascript" src=""></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;">

 Let's check live example

Leave a comment

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

You may also like