jQuery fadeIn method to show the elements with opacity changes

In jQuery, fadeIn method is used to change the opacity of the selected elements from hidden to visible in the web page.

jquery fadeIn syntax

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

In jQuery all the three parameters are optional for fadeIn 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.

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 fadeIn method example to show the elements

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery fadeIn method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnFadeIn').click(function () {
                $("div").fadeIn(10000,"swing", function () {
                    alert('fadeIn example!');
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnFadeIn" value="Fade In"/>
    <div style="height:200px;width:200px;background-color:blue;color:white;display:none;">
        This div will be fade In!
    </div>
</body>
</html>

Output:

Hidden div element

Hides div after clicking on Fade Out button

shows the div after clicking on Fade In button

jQuery fadeOut with callback function

callback function is used to display the alert message when clicking on Fade In button.

        $(document).ready(function () {
            $('#btnFadeIn').click(function () {
                $("div").fadeIn(function () {
                   alert('call back function!');
                });
            });
        });

shows 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 after displayed from hidden div.

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

« Previous Next »

jQuery Programming Examples

jQuery fadeIn method to show the elements with opacity changes