Me gustaría tener un div que se mueve arriba y abajo repetidamente usando jquery. En otras palabras, el div se inicia en la parte superior de un sitio a otro, se mueve hacia abajo y, a continuación, se mueve hacia arriba y repite este, en alrededor de un 1 segundo intervalo de ir de arriba a abajo y 1 segundo de nuevo a la parte superior. Hay la slideUp y slideDown así como animar a los métodos, pero no estoy seguro de cómo lograr esto, ya que necesita estar en un bucle sin fin y en javascript, se deben evitar los bucles.

  • se puede preparar un jsfiddle demo de lo que usted desea
  • ¿ setInterval ? Se utiliza para hacer la misma acción cada X milisegundos. Utilizar una variable como isDown, un valor booleano, que alternan entre lo verdadero y lo falso, cada vez que la animación de su bloque de arriba y abajo y, a continuación, un switch o un simple if se deslice hacia arriba si es hacia abajo, y hacia abajo si es.
  • las devoluciones de llamada debe aliviar la necesidad de un indicador booleano
  • setInterval tiene su propio contador de tiempo y si puedo usar slideUp/slideDown o animar, que utilizan sus propios temporizadores y creo que es posible para los dos para salir de la sincronización.
InformationsquelleAutor AndroidDev | 2013-08-21

2 Comentarios

  1. 10

    jQuery animate lógica de seguridad puede ser llamado con las devoluciones de llamada o encadenados sin usar setTimeout/setInterval:

    Algo como esto debería funcionar igual de bien para usted

    Demo

    function loop() {
        $('.bouncer').animate({'top': '500'}, {
            duration: 1000, 
            complete: function() {
                $('.bouncer').animate({top: 0}, {
                    duration: 1000, 
                    complete: loop});
            }});
    }
    loop();
    • Que es tan frikken cool! Que parece descartar el uso de slideUp/slideDown.
    • Actualizado demo para mostrar el lazo de la salida en caso de que haya dudas.
    • gracias! por favor tenga en cuenta que faltan algunos comillas simples en la función completa.
  2. 0

    usar setInterval, ver aquí:
    http://www.w3schools.com/js/js_timing.asp

    a fin de tratar este

    Javascript

    $(document).ready(function() {
        setInterval(function() {
            $('#thediv').slideUp('500', function() {
                $('#thediv').slideDown('500');
            });
        }, 1000);
    });

    HTML

    <div id='thediv' style='width:100px;height:200px;border:1px solid black;'>
    Div Contents
    </div>

    puede que necesite ajustar los tiempos (que se expresa en milisegundos)

    • Pensé acerca de eso, pero usted está usando un setInterval que contiene un intervalo de temporizador además de una animación separada de tiempo de 500 ms. Eso no es bueno porque los dos podría esencialmente salir de la sincronización.
    • sin un (agradablemente) mala bucle infinito no me veo haciendo esto sin setinterval
    • demuestra que se puede hacer!
    • Oh llamar el bucle de devolución de llamada que tiene sentido. Aseado.

Dejar respuesta

Please enter your comment!
Please enter your name here