JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div class="logonew">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

body{background-color:#333;}
.logonew{height:73px;width:730px;position:relative;}
.logonew div{line-height:73px;}
.logonew div:nth-child(1),
.logonew div:nth-child(2),
.logonew div:nth-child(3){background-repeat:no-repeat;}
.logonew div:nth-child(1),.logonew div:nth-child(3){height:100%;position:absolute;top:0;width:50%;z-index:2;}
.logonew div:nth-child(1){left:0;background-position:100%;}
.logonew div:nth-child(2){margin-left: 121px;height: 100%;opacity:0;}
.logonew div:nth-child(3){right:0;}
.logonew div:nth-child(1){
    background-image:...

JavaScript

$(document).ready(function () {
    var logonew1 = $('.logonew div:nth-child(1)');
    var logonew2 = $('.logonew div:nth-child(2)');
    var logonew3 = $('.logonew div:nth-child(3)');
    var t1 = 1600; //старт скрипта после постройки страницы
    var t2 = 1000; //время анимации
    var t3 = 50; //время появления recruitment
    setTimeout(function () {
        logonew1.animate({
            width: "121px"
        }, t2);
        setTimeout(function () {
            logonew2.animate({
                opacity: "1"
            }, 50);
        }, t2);
        logonew3.animate({
            width: "173px"
        }, t2);
    }, t1);

});