JSFiddle - React, Tailwind, and code Playground

by jamessouth

HTML

<body class="blue">
    <div id="background" class="blueTop">
    </div>
    <div id="page">
        <a href="#" class="trigger">click me</a>
    </div>    
</body>

CSS

body{
    height:100%;
    width:100%;
}
#background
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#tempBackground, #tempBackgroundTop
{
    height: 100%;
    width: 100%;
    position: absolute; /*Opposite of page margin*/
    top: 0;
    left: 0;
    z-index: 1;
}
#page
{
    position: relative;
    z-index: 2;
    width: 400px;
    margin: 0px auto 0px auto;
    padding-top: 20px;
    border: 1px solid #496077;
    background:#fff;
}

.blueTop
{
    background: url('http://new.myvue.com/images/bgs/blue_top.jpg') no-repeat;

}
.blue
{
    background: url('http://new.myvue.com/images/bgs/blue_repeat.jpg') repeat-y;
    background-color: #6FA6DC;
}
.turquoiseTop
{
    background: url('http://new.myvue.com/images/bgs/turquoise_top.jpg') no-repeat;
}
.turquoise
{
    background: url('http://new.myvue.com/images/bgs/turquoise_repeat.jpg') repeat-y;
    background-color: #01D7CF;
}

JavaScript

jQuery("a.trigger").click(function (event) {
        event.preventDefault();

        var speed = 1e3,
            $body = jQuery("body"),
            $background = jQuery("#background"),
            $page = jQuery("#page"),
            $tempBackgroundTop = jQuery("<div/>").attr("id", "tempBackgroundTop").addClass("blueTop"),
            $tempBackground = jQuery("<div/>").attr("id", "tempBackground").addClass("blue");

        $page.after($tempBackgroundTop).after($tempBackground);
        $body.removeClass("blue").addClass("turquoise");
        $background.removeClass("blueTop").addClass("turquoiseTop");

        jQuery.when($tempBackgroundTop.fadeOut(speed), $tempBackground.fadeOut(speed)).done(function () {

            $tempBackgroundTop.remove();
            $tempBackground.remove();

        });
    });