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>Example of jQuery fadeTo method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.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>


 Let's check live example

0 comments


Leave a comment

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

You may also like