jQuery fadeOut method to hide the elements with opacity changes

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

jquery fadeOut syntax

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

In jQuery all the three parameters are optional for fadeOut method.

Speed of animation

"fast" - hides the element faster.

"normal" - hides the element in normal.

"slow" - hides the element slower.

milliseconds - hides 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 hide method example to hide the element

<!DOCTYPE html>

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

Output:

Shows div element

Hides div after clicking on Fade Out button

hides the div after clicking on Fade Out button

jQuery fadeOut with callback function

callback function is used to update the hidden div text when shows on clicking of Fade Outbutton.

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

hides 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 hidden.

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

« Previous Next »

jQuery Programming Examples

jQuery fadeOut method to hide the elements with opacity changes