JSFiddle - React, Tailwind, and code Playground

by andy_hop

HTML

<div>
    <div style="font-family: Calibri;font-size: 44px;float: right;margin-right:10%;">Elevator</div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv"></div>
        </div>
        <div>
            <div class="box checked">
            </div>
            <div id="check2" class="box checkbox">
            </div>
            
        </div>
        <div class="uncheck">

        </div>
    </div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv" id="groundDiv"></div>
        </div>
        <div>
            <div class="box checked">
            </div>
            <div id="check1" class="box checkbox">
            </div>
            
        </div>
        <div class="uncheck">
        </div>
    </div>
</div>

CSS

.blockDiv {
    width: 60px;
    height: 60px;
    background: #0000FF;
    border: 2px solid #000;
}
.activeDiv, #groundDiv {
    width: 45px;
    height: 45px;
    background: #FFAC00;
    margin-left: 8px;
    margin-top: 8px;
    position:relative;
}
.checkbox {
    height: 42px;
    margin-left: 75px;
    padding: 0px 0 0 28px;
    background-image: url("http://www4.picturepush.com/photo/a/12675332/img/12675332.gif");
    background-repeat: no-repeat;
    background-position: 0% 0px;
   
}

.checked {
    background: url('http://www2.picturepush.com/photo/a/12675320/img/12675320.gif') no-repeat;
}

.box{
    posotion:absolute;    
}

JavaScript

$(function(){
    $(document).ready(function(){
    /*
    $("#check1").click(function () {
        $(this).animate({
            opacity:0
        },150);
       
        $("#groundDiv").animate({
            "top": "0px"
        }, 1000,function(){
            $(this).animate({
                opacity:1
            },150)
        });
    });
});
    */


    $("#check2").click(function () {
        try{
       $(this).animate({
            opacity:0
        },150);
        
        $("#groundDiv").animate({
            "top": "-65px"
        },1000,function(){
            $(this).animate({
                opacity:1
            })
            },150);
        }catch(err){
            alert("Not Working");
        }
        });
        
     });
 });