Introduction:

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

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

Syntax:

$(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="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnFadeTo").click(function () {
                $("#divFadeTo").fadeTo("slow", "0.20");
            });
        });
    </script>
 
</head>
<body>
    <input type="button" id="btnFadeTo" value="Fade To" /><br /><br />
 
    <div id="divFadeTo" style="width:200px;height:80px;background-color:red;">
 
    </div>
 
</body>
</html>

Output:


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


I hope it will help to you after reading.

0 comments


Leave a comment

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

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.