Edit in JSFiddle

Result
JavaScript
HTML
CSS

 $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#box1").slideUp(3000).delay(2000).fadeIn(1000);
                    $("#box2").slideUp(3000).fadeIn(1000);
                });
            });

<html>
        <head>
        <title>delay</title>
        </head>
        <body>
        <input type="button" id="myButton" value="Click ME"><br /><br />
        <div id="box1"></div>
        <div id="box2"></div>
        </body>
        </html>

div
        {
        height:100px;
        width:100px;
        position:absolute;
        float:left
        }
        #box1
        {
        left:100;
        background-color:orange;
        }
        #box2
        {
        left:250px;
        background-color:Red;
        }