Lift Example

by andy_hop

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="floor">
    <div id="secondFloor">
    </div>
    <div class="checkBox_Container" id="check2">
            <div class="checkbox checked">
            </div>
            <div class="checkbox unchecked">
            </div>
    </div>
</div>
<div class="floor">
    <div id="firstFloor">
        <div id="lift">
        </div>
    </div>
    <div class="checkBox_Container" id="check1">
            <div class="checkbox checked">
            </div>
            <div class="checkbox unchecked">
            </div>
    </div>
</div>

CSS

#firstFloor,#secondFloor,.checkBox_Container{
    width: 60px;
    height:60px;
    padding: 20px;    
    background-color:green;
    border:1px solid black;
    
}
#lift{
    background-color:blue;
    width:60px;
    height:60px;
    position:absolute;
}

.floor{
   float:left;
    clear:both;
    margin-bottom:2px;
}
.floor div{
    float:left;    
}
.checkBox_Container{
    width: 120px;
    background: none;
    border:1px solid black;
    margin-left: 2px;
}

.checkbox{
    width:60px;
    height:60px; 
    background-color: orange;
    position:absolute;
    background: white  url("http://www4.picturepush.com/photo/a/12675332/img/12675332.gif") 9px 23px no-repeat;
}
.checked{
    background-color: red;
    background: white  url("http://www2.picturepush.com/photo/a/12675320/img/12675320.gif") center center no-repeat;
}

JavaScript

$(document).ready(function(){
    $("#check2 .unchecked").click(function(){
       try{
                $(this).animate({
                    opacity:0
                },100,function(){
                    $("#lift").animate({
                        marginTop: "-104px"
                    },500,function(){
                            $("#check2 .unchecked").animate({
                                opacity:1
                            },2000)         
                    });
                    
                });
        }catch(err){
             alert(err.message);
        }
    });
    
       $("#check1 .unchecked").click(function(){
       try{
                $(this).animate({
                    opacity:0
                },100,function(){
                    $("#lift").animate({
                        marginTop: "0"
                    },500,function(){
                            $("#check1 .unchecked").animate({
                                opacity:1
                            },2000)         
                    });
                    
                });
        }catch(err){
             alert(err.message);
        }
    });
});