jQuery Fadeout animation example

By: Mohamed Rasik

31 October 2016

JQuery

In this article I will show you how to use fadeout using jQuery. You can control animation duration using argument to specify in integer (milliseconds) .If you set fadeout delay duration as 0 milliseconds it will disable the animation effect. The callback function should be executed after the animation ends. When the user clicks the OK button event fires, the dialog box disappears and removed from the DOM.

Syntax:

jQuery(elements).fadeOut([duration], [callback]);

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {

           $("#overlay button").click(function () {
                $("#overlay").fadeOut(5000, function () {
                    $(this).remove();
                });
            });
        });
    </script>

<style type="text/css">
        #dialog {
            background-color: #fff;
            width: 300px;
            padding: 10px;
            font: normal 14px "Nimbus Sans L", "Helvetica Neue", "Franklin     Gothic Medium", Sans-serif;
            border: 1px solid #aaa;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            -moz-box-shadow: 2px 2px 5px #000;
            -webkit-box-shadow: 2px 2px 5px #000;
            box-shadow: 2px 2px 5px #000;
        }
 
            #dialog:after {
                content: "";
                height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }
 
            #dialog header {
                display: block;
                padding-bottom: 5px;
                margin-bottom: 10px;
                font-weight: bold;
                font-size: 16px;
                border-bottom: 1px solid #aaa;
            }
 
            #dialog footer {
                display: block;
                padding-top: 10px;
                margin-top: 10px;
                border-top: 1px solid #aaa;
            }
 
            #dialog button {
                float: right;
            }
    </style>
<body>
    <div id="overlay">
        <div id="dialog">
            <header>Dialog box</header>
            Lorem ipsum etc, etc.
            <footer>
                <button>Ok</button></footer>
        </div>
    </div>
</body>

Output:

Main menu

jQuery Fadeout animation example

Related Article

Post your comments / questions

Recent Article