Jquery 수평 슬라이딩 탭 메커니즘

Question

두 개의 div가 오른쪽에서 왼쪽으로 슬라이딩됩니다. div에 "화살표"라는 이름의 div가 "inner"라는 div에 왼쪽으로 밀어 넣기 만하면 어려움을 겪고 있습니다.

<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script> 
<script language="javascript"> 
$(document).ready(function() { 
     var out = 0; 
     $("#arrow").click(function(){ 
     if(out==0) 
     { 
      $("#inner").animate({marginRight: "0px"}, 500); 
      out=1; 
     } 
    else 
     { 
     $("#inner").animate({marginRight: "-100px"}, 500); 
     out=0; 
     } 
    }); 
}); 
</script> 

<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden;"> 
    <div id="inner" style="height: 100px; width: 100px; background-color: rgb(0, 204, 102); float: right; margin-right:-100px;" >Form is here</div> 

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer;" >Arrow is here</div> 


</div> 

Answer 1

이 시도 :

<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;"> 
<div id="inner" style="height: 100px; width: 100px; background-color: rgb(0, 204, 102); float: right; margin-right:-100px;" >Form is here</div> 

<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div> 


</div>