jQuery Tutorial

jQuery fadeTo method to fade the element for opacity value

jQuery fadeTo method to fade the element for required opacity changes

In jQuery, fadeTo method is used to gradually change the opacity of the selected element in the web page.

jquery fadeTo syntax

$(selector).fadeTo(speed of animation, opacity, easing, callback function)

In jQuery speed and opacity are the required parameters and remaining other parameters are optional for fadeTo method.

Speed of animation

"fast" - shows the element faster.

"normal" - shows the element in normal.

"slow" - shows the element slower.

milliseconds - shows the element animation as based on specified milliseconds.

Opacity

Opacity changes value to be display the faded element and value should be between 0.00 ( transparent ) to 1.00 ( opaque ).

easing

"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery fadeTo method example to fade the element for specified opacity value

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery FadeTo method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnFadeTo').click(function () {
                $("#divTitle").fadeTo(5000, 0.3, "linear", function () {
                    alert("Fade To example!")
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnFadeTo" value="Fade To"/>
    <div id="divTitle" style="height:200px;width:200px;background-color:blue;color:white;">
        div element fadeTo testing!
    </div>
</body>
</html>

Output:

Hidden div element

Fades div after clicking on Fade To button

Fades the div after clicking on Fade To button

jQuery FadeTo with callback function

callback function is used to display the alert message once fades the div element for required opacity value when clicking on Fade To button.

        $(document).ready(function () {
            $('#btnFadeTo').click(function () {
                $("div").fadeTo("slow", 0.2, function () {
                   alert('callback function!');
                });
            });
        });

Fades the div element with opacity changes for 10000 milliseconds, animation mode is swing (In middle of animation is faster) and callback function is used to display alert message once displayed faded div with specified opacity value.

        $(document).ready(function () {
            $('#btnFadeTo').click(function () {
                $("div").fadeTo(10000,0.3,"swing", function () {
                    alert('fadeTo example!')
                });
            });
        });

« Previous Next »

jQuery Programming Examples

jQuery fadeTo method to fade the element for opacity value

jQuery fadeTo method to fade the element for required opacity changes

Speed of animation

Opacity

easing

jQuery fadeTo method example to fade the element for specified opacity value

jQuery FadeTo with callback function

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

Update page title using jquery

print objects