JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div class="foo">
    <h1>Hello</h1>
</div>
<div class="bar"></div>

CSS

div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    cursor: pointer;
    overflow: hidden;
}

.foo {
    background-color: red;
}
.bar {
    background-color: blue;
}

JavaScript

var first, second;
var half = 100;
$('.bar').css({ left: half, width: 0, opacity: 0.5 });
$('.foo, .bar').click(function () {
    if (this.className.indexOf('foo') >= 0) {
        first = $('.foo');
        second = $('.bar');
    } else {
        first = $('.bar');
        second = $('.foo');
    }
    first.animate({ left: half, width: 0, opacity: 0.5 }, 500, function () {
        second.animate({ left: 0, width: 200, opacity: 1 }, 500);
    });
});