title: Content slider using jquery offset and css problems
body: <p>This is my First question (I did search first and browse for hours)</p>
  
  <p>so I'm trying to build a one page site that has sliding offset sections based on this jsfiddle I found: <a href="http://jsfiddle.net/jtbowden/ykbgT/" rel="nofollow">http://jsfiddle.net/jtbowden/ykbgT/</a>
  credits to jtbowden!</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div id="box1" class="box"&gt;Div #1&lt;/div&gt;
      &lt;div id="box2" class="box"&gt;Div #2&lt;/div&gt;
      &lt;div id="box3" class="box"&gt;Div #3&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
      padding: 0px;    
  }
  
  #container {
      position: absolute;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;  
  }
  
  .box {
      position: absolute;
      width: 50%;
      height: 300px;
      line-height: 300px;
      font-size: 50px;
      text-align: center;
      border: 2px solid black;
      left: 50%;
      top: 100px;
      margin-left: -25%;
  }
  
  #box1 {
      background-color: green;
      left: -150%;
  }
  
  #box2 {
      background-color: yellow;
  }
  
  #box3 {
      background-color: red;
      left: 150%;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('.box').click(function() {
      $('.box').each(function() {
          if ($(this).offset().left &lt; 0) {
              $(this).css("left", "150%");
          } else if ($(this).offset().left &gt; $('#container').width()) {
              $(this).animate({
                  left: '50%',
              }, 500 );
          } else {
              $(this).animate({
                  left: '-150%',
              }, 500 );
          }
      });
  });
  </code></pre>
  
  <p>It does exactly what I want except that when you add more sections they start eating each-others content and don't return back to "div1" like it does when you have just one "container"
  heres basically what is happening: <a href="http://jsfiddle.net/cody32x/MTvG8/" rel="nofollow">http://jsfiddle.net/cody32x/MTvG8/</a> 
  I've tried renaming each section and even making new functions for each section but I can't figure it out!
      </p>
  
  <pre><code>    &lt;div id="box1" class="box"&gt;Div #1&lt;/div&gt;
      &lt;div id="box2" class="box"&gt;Div #2&lt;/div&gt;
      &lt;div id="box3" class="box"&gt;Div #3&lt;/div&gt;
      &lt;div id="box4" class="box"&gt;Div #4&lt;/div&gt;
      &lt;div id="box5" class="box"&gt;Div #5&lt;/div&gt;
      &lt;div id="box6" class="box"&gt;Div #1&lt;/div&gt;
      &lt;div id="box7" class="box"&gt;Div #2&lt;/div&gt;
      &lt;div id="box8" class="box"&gt;Div #3&lt;/div&gt;
      &lt;div id="box9" class="box"&gt;Div #4&lt;/div&gt;
      &lt;div id="box10" class="box"&gt;Div #5&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="container2"&gt;
  
      &lt;div id="box1" class="box"&gt;2-Div #1&lt;/div&gt;
      &lt;div id="box2" class="box"&gt;2-Div #2&lt;/div&gt;
      &lt;div id="box3" class="box"&gt;2-Div #3&lt;/div&gt;
      &lt;div id="box4" class="box"&gt;2-Div #4&lt;/div&gt;
      &lt;div id="box5" class="box"&gt;2-Div #5&lt;/div&gt;
      &lt;div id="box6" class="box"&gt;2-Div #1&lt;/div&gt;
      &lt;div id="box7" class="box"&gt;2-Div #2&lt;/div&gt;
      &lt;div id="box8" class="box"&gt;2-Div #3&lt;/div&gt;
      &lt;div id="box9" class="box"&gt;2-Div #4&lt;/div&gt;
      &lt;div id="box10" class="box"&gt;2-Div #5&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
      padding: 0px;    
  }
  
  #container {
      position: absolute;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      cursor: pointer;
  }
  #container2 {
      position: absolute;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      top: 300px;
      overflow: hidden; 
      cursor: pointer;
  
  }
  
  .box {
      position: absolute;
      width: 100%;
      height: 100px;
      line-height: 100px;
      font-size: 50px;
      text-align: center;
      border: 2px solid black;
      left: 200%;
      top: 100px;
      margin-left: -50%;
  }
  
  #box1 {
      background-color: green;
      left: 50%;
  }
  
  #box2 {
      background-color: yellow;
  }
  
  #box3 {
      background-color: red;
  }
  
  #box4 {
      background-color: orange;
  }
  
  #box5 {
      background-color: blue;
  }
  #box6 {
      background-color: black;
  }
  #box7 {
      background-color: gray;   
  }
  #box8 {
  background-color: blue; 
  }
  #box9 {
  background-color: red;   
  }
  #box10 {
  background-color: aqua;   
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('.box').click(function() {
  
      $(this).animate({
          left: '-50%'
      }, 500, function() {
          $(this).css('left', '150%');
          $(this).appendTo('#container');
      });
  
      $(this).next().animate({
          left: '50%'
      }, 500);
  });
  </code></pre>
  
  <p>thanks so much! and sorry if I'm not posting correctly on here... I'm new.</p>