bucle continuo con divs y jquery

Estoy continuando una post anterior, pero pensé en abrir un hilo nuevo, ya que se necesita un enfoque diferente y más real de código. De todos modos, estoy tratando de llegar a un bucle infinito de ir con divs desplazamiento a través de una ventana (el otro post tiene una imagen, y el código de abajo funciona).

<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>

De todos modos, el problema es que puedo llegar a las casillas para moverse a la izquierda, pero no puedo obtener el líder cuadro de pop de vuelta al final de la línea cuando ejecuto toda la cosa. Cuando ejecuto cada función por separado (usando firebug) –

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

Funciona muy bien. Cuando me los puse juntos, acabo de llegar de continuo movimiento de derecha a izquierda hasta que las cajas de salir de la pantalla, por lo que debe ser la manera en que interactúan. Espero que esto tiene sentido (si no, guarde el anterior bloque de código como un archivo html y ejecutado en un navegador). He estado atrapado en esto, así que cualquier ayuda será impresionante. Gracias.

InformationsquelleAutor sa125 | 2009-11-18

2 Kommentare

  1. 4

    Que usted necesita para establecer la devolución de llamada como esta

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

    checkEdge() no checkEdge

    Marque aquí para una solución de trabajo http://jsbin.com/uceqi (sólo copia pega tu código)


    Aquí lo que realmente hace una diferencia si deja las llaves de distancia. La versión con frenos ejecuta checkEdge() una vez por animación (para ser honesto, en realidad se ejecuta checkEdge ANTES de que la animación se inicia. El checkEdge()función es llamada cuando el $...animte(..) declaración se llega incluso antes de que animate() propio ejecuta. checkEdge haría que la función que se pasa como parámetro, normalmente la manera correcta de ir).

    La versión sin llaves se ejecuta checkEdge de una vez por el número de elementos coincidentes con el selector. En este caso 6 veces.

    Así que, técnicamente hablando, su enfoque sería correcta, ya que sería de bomberos de la devolución de llamada una vez por cada elemento animado y DESPUÉS de la animación.
    Pero la ejecución checkEdge una vez esto, obviamente, no es lo que la intención del autor (comprobación de bucle de más de divs en checkEdge). Y también causa graves quedando como bucle varias veces a lo largo de todos los divs

    6divs animados -> 6x devolución de llamada despedido -> de devolución de llamada se repite a lo largo de todos los divs ==> 36x la ejecución de la función anónima en checkEdge()!!

    Por lo que el problema real es que la devolución de llamada despiden a 6x y todos al mismo tiempo. Así pues, tenemos una condición de carrera y la animación se equivoca. Como varios checkEdge() llamadas de trabajar conjuntamente en el reposicionamiento de los divs.

    Pero sólo te aviso esto porque el animation-speed y el intervalo en setInterval (shiftLeft) son idénticos. Tendría que ser diferente ((intervalo de +~1000ms) > animación de velocidad), entonces debería funcionar correctamente también. Pero, por supuesto, la animación no sea fluida. Como shitfLeft() dispara 1s después de la animación se detuvo.

    Puede comprobar este ejemplo http://jsbin.com/iwapi3 que ilustra lo que sucede cuando uso la versión sin llaves. Esperar por algún tiempo, y el contador para checkEdge() llamadas aumenta en 7 de cada 3s. También se dará cuenta de que, en algunos casos, la animación parcialmente las obras y algunos divs se mudó de nuevo a la final de la lista (a veces).

    Después de algún tiempo, haga clic en el botón y ver cómo la versión con frenos ordena el lío después de un par de carreras (pero por ahora, el orden correcto de los colores es, por supuesto, en mal estado). Y sólo llamadas checkEdge() una vez por animación. (Poco después de golpear el botón obtendrá otro +7 como callbacks todavía están en la tubería)

    • hm, ¿la sintaxis de hacer una diferencia? he usado la versión sin las llaves con gran éxito antes del iirc.
    • de hecho en este caso. explicación de mi respuesta. técnicamente la solución estaría en lo correcto y mi solución incorrecta. La respuesta del cheque para más detalles
    • gracias por tu explicación
  2. 0

    La ejecución de JavaScript no espere hasta que el 3000msec de su función animate que se gastan. Se inicia la función animar, pero tras el 0-1 mseg) pasar a su checkEdge() función. No comprobar el estado en el checkEdge() usted puede ser que desee.

    Para evitar esto, usted debe agregar a su checkEdge() función de devolución de llamada a la función animate, que se ejecutará exactamente después de los 3000ms.

    Intente esto:

    $('.box').animate({'left' : "-=100px"}, 3000, 'linear', checkEdge);
    • Gracias por la respuesta. Intentado la solución, pero ahora estoy teniendo extraño e incoherente de las cosas que suceden en mi código, como cajas, como saltar de nuevo w/s de orden en particular.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea