Basic Test

by mledbetter

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="styles/test1.css" rel="stylesheet" type="text/css" />
        <script type='text/javascript'></script>
    </head> 
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
        <div id="div3">
            <div id="div4"></div>
        </div>
    </body>
</html>

CSS

#div1
{
    background: #000000;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
#div2
{
    background: #ee3e64;
    position: absolute;
    width: 50px;
    height: 50px;
}
#div3
{
    background: #44accf;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
#div4
{
    background: #b7d84b;
    position: relative;
    width: 50px;
    height: 50px;
}

JavaScript

$(document).ready(function() {
    $('#div4').fadeOut('slow', function() {
        $(this).fadeIn('slow', function() {
            $('#div2').fadeOut('slow', function() {
                $(this).fadeIn('slow', function() {
                    $('#div4,#div2').fadeOut('slow', function() {
                        $(this).fadeIn('slow');
                    });
                });
            });
        });
    });
});