delay method in jQuery with example

Home » JQuery » jQuery Methods » delay method in jQuery with example

delay method in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. delay() method set a timer to delay execution of subsequent items in the queue.
2. delay() method accepts time in milliseconds, or can be specified using slow or fast string. slow and fast indicated 200 and 600 milliseconds respectively.
3. delay() method allows us to delay the execution of function that follow in the queue.

Example 1 :

        <html>
        <head>
        <title>delay</title>
        <style>
        div
        {
        height:100px;
        width:100px;
        position:absolute;
        float:left
        }
        #box1
        {
        left:100;
        background-color:orange;
        }
        #box2
        {
        left:250px;
        background-color:Red;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#box1").slideUp(3000).delay(2000).fadeIn(1000);
                    $("#box2").slideUp(3000).fadeIn(1000);
                });
            });
        </script>
        </head>
        <body>
        <input type="button" id="myButton" value="Click ME"><br /><br />
        <div id="box1"></div>
        <div id="box2"></div>
        </body>
        </html>

Demo :

In above example, we have created two divs and applied different CSS to both of them. On button click, both the divs slides up. We have used slideUp() method to show sliding effect. After slide effect, we are showing divs using fadeIn() method. On first div before using fadeIn() method, we have used delay() method which delays the execution of fadeIn() method in case of first div. That is why first div show up after some delay.