Continuous loop with div and jquery

Question

Continuous loop with div and jquery

I continue the previous post , but I thought I would open a new thread, since it uses a different approach and has more real code. Anyway, I'm trying to get an infinite loop when divs scroll through the window (another message has an image, and below the code works).

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Bleh...</title>
        <style type="text/css" media="screen">
            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;}

        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(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);
                }
              });


            }
        </script>
    </head>
    <body id="index">
        <div id="container">
          <div id="window">
            <div class="box red"></div>
            <div class="box green"></div>
            <div class="box blue"></div>
            <div class="box yellow"></div>
            <div class="box purple"></div>
            <div class="box cyan"></div>
          </div>
        </div>
    </body>
</html>

Anyway, the problem is that I can get the fields to move to the left, but I can't get the lead box to go back to the end of the line when I run it all. When I run each function separately (using firebug) -

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

. , , , , . , ( , html ). - , . .

+3

jquery animation slider continuous motion

sa125 18 . '09 7:38

2

JavaScript , 3000 . , ( 0-1 ) checkEdge(). checkEdge(), .

, checkEdge() animate, 3000 .

:

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

0

Karsten 18 . '09 8:41

jitter · Accepted Answer · 2009-11-18T10:09:11+0000

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

checkEdge() not checkEdge

http://jsbin.com/uceqi ( )

, . checkEdge() ( , checkEdge . checkEdge() , $...animte(..) animate(). checkEdge , , , ).

checkEdge , . 6 .

, , , . checkEdge, , ( divs checkEdge). , divs

6divs animated -> 6x -> divs ==> 36x checkEdge()!!

, , 6 . , , . checkEdge() div.

, animation-speed setInterval (shiftLeft) . (( + ~ 1000 ) > ), . , , . shitfLeft() 1 .

http://jsbin.com/iwapi3, , . , checkEdge() 7 3 . , , divs ().

- , ( , , ). checkEdge() . ( +7, )

Continuous loop with div and jquery

More articles: