title: continuous loop with divs and jquery
body: <p>I'm continuing a <a href="https://stackoverflow.com/questions/1748656/images-sliding-continuously-with-table-and-jquery">previous post</a>, but I thought I'd open a new thread since it takes a different approach and has more actual code. Anyway, I'm trying to get an infinite loop going with divs scrolling through a window (the other post has an image, and the code below works).</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Bleh...&lt;/title&gt;
          &lt;style type="text/css" media="screen"&gt;
              body {
                  padding: 0;
                  text-align: center;
              }
  
              #container {
                width: 1000px;
                padding: 10px;
                border: 1px solid #bfbfbf;
                margin: 0 auto;
                position: relative;
              }
  
              #window {
                width: 400px;
                height: 100px;
                padding: 10px;
                border: 3px solid #666;
                margin: 0 auto;
              }
  
              .box {
                height: 100px;
                width: 100px;
                border: 1px solid #666666;
                position: absolute;
                z-index: -1;
              }
  
              .red { background-color: #ff6868;}
              .green { background-color: 7cd980;}
              .blue { background-color: #5793ea;}
              .yellow { background-color: #f9f69e;}
              .purple { background-color: #ffbffc;}
              .cyan { background-color: #bff3ff;}
  
          &lt;/style&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" charset="utf-8"&gt;
              $(window).load(function() { 
                 arrangeBoxes();
                 setInterval('shiftLeft()', 3000);
              });
  
              // arrange the boxes to be aligned in a row
              function arrangeBoxes() {
                $('.box').each( function(i, item) {
                  var position = $('#window').position().left + 3 + i * ( $(item).width() + 10 );
                  $(item).css('left', position+'px')
                });
              }
  
              // shifts all the boxes to the left, then checks if any left the window
              function shiftLeft() {
                $('.box').animate({'left' : "-=100px"}, 3000, 'linear');
                checkEdge();
              }
  
              // returns the new location for the box that exited the window
              function getNewPosition() {
                return $('.box:last').position().left + $('.box:last').outerWidth() + 10;
              }
  
              // if the box is outside the window, move it to the end
              function checkEdge() {
                var windowsLeftEdge = $('#window').position().left;
  
                $('.box').each( function(i, box) {
  
                  // right edge of the sliding box
                  var boxRightEdge = $(box).position().left + $(box).width();
  
                  // position of last box + width + 10px
                  var newPosition = getNewPosition();
                  if ( $(box).attr('class').indexOf('red') &gt;=0 ) {
                    console.log('box edge: ' + boxRightEdge + ' window edge: ' + windowsLeftEdge + ' new pos: ' +newPosition);
                  }
  
                  if ( parseFloat(boxRightEdge) &lt; parseFloat(windowsLeftEdge) ) { 
                    $(box).css('left', newPosition);
                    $(box).remove().appendTo('#window');
                    first = $('.box:first').attr('class');
                    console.log('first is ' +  first);
                  }
                });
  
  
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body id="index"&gt;
          &lt;div id="container"&gt;
            &lt;div id="window"&gt;
              &lt;div class="box red"&gt;&lt;/div&gt;
              &lt;div class="box green"&gt;&lt;/div&gt;
              &lt;div class="box blue"&gt;&lt;/div&gt;
              &lt;div class="box yellow"&gt;&lt;/div&gt;
              &lt;div class="box purple"&gt;&lt;/div&gt;
              &lt;div class="box cyan"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Anyway, the problem is that I can get the boxes to move left, but I can't get the leading box to pop back to the end of the line when I run the whole thing. When I run each function separately (using firebug) - </p>
  
  <pre><code>&gt;&gt; $('.box').animate({'left' : "-=100px"}, 3000, 'linear');
  &gt;&gt; checkEdge()
  </code></pre>
  
  <p>It works great. When I put them together, I just get continuous motion right-to-left until the boxes leave the screen, so it must be how they interact. I hope this makes sense (if not, save the above code block as an html file and run it in a browser). I've been stuck on this for a while, so any help will be awesome. Thanks.</p>