непрерывный цикл с div и jquery

я продолжаюпредыдущий пост, но я думал, чтобуду открывать новый поток, поскольку он использует другой подход и содержит более актуальный код. Тем не менее, я'Я пытаюсь получить бесконечный цикл с прокруткой div через окно (другой пост имеет изображение, и код ниже работает).


    
        
        Bleh...
        
            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;}

        
        
        
            $(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') >=0 ) {
                  console.log('box edge: ' + boxRightEdge + ' window edge: ' + windowsLeftEdge + ' new pos: ' +newPosition);
                }

                if ( parseFloat(boxRightEdge) < parseFloat(windowsLeftEdge) ) { 
                  $(box).css('left', newPosition);
                  $(box).remove().appendTo('#window');
                  first = $('.box:first').attr('class');
                  console.log('first is ' +  first);
                }
              });


            }
        
    
    
        
          
            
            
            
            
            
            
          
        
    

В любом случае, проблема в том, что я могу заставить коробки сдвигаться влево, но я могуя получаю ведущую коробку, чтобы вернуться к концу строки, когда я запускаю все это. Когда я запускаю каждую функцию отдельно (используя firebug) -

>> $('.box').animate({'left' : "-=100px"}, 3000, 'linear');
>> checkEdge()

Работает отлично. Когда я собираю их вместе, я просто получаю непрерывное движение справа налево, пока прямоугольники не покинут экран, поэтому, должно быть, они взаимодействуют друг с другом. Я надеюсь, что это имеет смысл (если нет, сохраните приведенный выше блок кода в виде файла HTML и запустите его в браузере). Я'Я застрял на этом некоторое время, поэтому любая помощь будет потрясающей. Благодарю.

Ответы на вопрос(2)

Ваш ответ на вопрос