Jquery Горизонтальный раздвижной механизм

Question

У меня есть два div, которые скользят справа налево. Я испытываю трудности с тем, чтобы div с именем «стрелка» оставался на месте и двигался только влево к Div с именем «inner».

<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>