JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
       <div id="container">
            <div id="left">
                <div id="left_"><h1>TESTE DE BLUUUUUUUUUUR</h1></div>
                <div id="left_1"></div>
            </div>
            <div id="right">
                <div id="right_"></div>
            </div>
        </div>
</body>
</html>

CSS

* {
    padding:0;
    margin:0;
    outline:none;
}
#container {
    width:980px;
    height:600px;
    margin:0 auto;
    background:#CCC;
}
#left {
    width:490px;
    height:600px;    
    float:left;
    background:#F00;
    position:relative;
    overflow:hidden;
}
#right {
    width:490px;
    height:600px;
    float:right;
    background:#00F;
    position:relative;
    overflow:hidden;        
}
#left_ {
    width:400px;
    height:300px;    
    background:#FFF;
    position:absolute;
    top:150px;
    right:-400px;    
}
#left_1 {
    width:400px;
    height:300px;    
    background:#309;
    position:absolute;
    top:150px;
    right:-400px;    
}
#right_ {
    width:400px;
    height:300px;    
    background:#CCC;
    position:absolute;
    top:150px;
    left:-400px;    
}
h1 {
    color:#006633;
}

JavaScript

var Class = (function () {

    //PRIMEIRO ELEMENTO ENTRANDO EM CENA
    var animar = (function () {
        var $left = $('#left_');
        $left.animate({
            right: '0'
        }, 1500,
        //função de callback da primeira animação
        function () {
            $left.delay(2000)
                .animate({
                top: '700px',
                opacity: 0
            },
            // função da segunda animação
            function () {
                animar2();
                $left.css({
                    'top': '150px',
                    'opacity': 1,
                    'right': '-400px'
                });
            });
        } //fim callback
        ); // fim animate()
    }); // fim animar

    // SEGUNDO ELEMENTO ENTRANDO EM CENA
    var animar2 = (function () {
        var $left2 = $('#left_1');
        $left2.delay(1200)
            .animate({
            right: '0'
        }, 500, function () {
            //função de callback
            $left2.delay(2000)
                .animate({
                top: '-700px',
                opacity: 0
            }, 600, function () {
                $left2.css({
                    'top': '150px',
                    'right': '-400px',
                    'opacity': 1
                });
                return animar();
            });
        });
    });
    return {
        set: animar
    }
}());

Class.set();