Slide div. Jquery
<p>I'm using this code to slide divs off the screen:</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>html:</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:
          .box {
             position: absolute;
             left: 150%;
             margin-left: -25%;
          }  </p>

<pre><code>       #box1 {

         left: 50%;
       }
</code></pre>

<p>It works great. But when I click on the last div, the first one comes back and I can go over all the div again.</p>

<p>I would like it to stop when the last div appears. Could you give me hints on how I can accomplish that?</p>

<p>Thank you for your help.</p>
