Slide Div

HTML

<div style="width:855px;height:20px;background:orange">
head
</div>

<a class="show" style="color:#999;">클릭 div 슬라이딩</a>
<div id="website">
 Your DIV here!
 </div>
 <div id="website2" style="margin:0 auto">
 my DIV here!
</div>
<div style="width:855px;height:20px;background:orange">
tail
</div>

CSS

#website {
    height: 100px;
    position: relative;
    background: #666;
    width: 50%;
    left: -100%;
    top:20px;
       float:left;  /* 추가*/
    
}

#website2 {
    height: 100px;
position:relative;
background:yellow;
width:50%;
      left: 0%;  
}

JavaScript

$('a').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-100%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
    
     if($('#website2').css('left')=='0px'){
        $('#website2').animate({left: '28%'}, 1000);        
    }else{
        $('#website2').animate({left:0}, 1000); 
    }    
});


$(function() {
    $("#website2").click(function() {
        $("#website2").hide();
    });
});