Estoy tratando de hacer una página web que use un div en movimiento que se mueva lentamente hacia la izquierda. También hay otro div que se mueve encima de él a la derecha que da un efecto 3D (pero eso no viene al caso).

Lo que estoy tratando de hacer ahora es un div de 7000 px de ancho que se mueve lentamente hacia la izquierda (animando la propiedad "derecha" de CSS con jQuery animate()), pero después de que todo se mueve, la animación termina.

¿Hay alguna manera de hacer que el div tenga un ancho infinito o al menos hacer que regrese al principio (al igual que una cosa de una tienda de comestibles) para que la animación nunca se detenga?

Estoy pensando que esto requiere algunos divs separados, cada uno una vez que llega a su fin, regresa, pero no puedo entender cómo hacerlo, ya que soy un desarrollador principiante de jQuery.

3
Brandon Wang 16 jun. 2009 a las 02:32

3 respuestas

La mejor respuesta

ACTUALIZACIÓN

Teniendo en cuenta su ejemplo en http://nth.brandonwang.org/stuhf2/simpleindex.html puede solucionarlo simplemente agregando una devolución de llamada al final, su script debe ser así:

$(document).ready(function() {
    animateRight ();
    animateLeft ();
});

function animateRight ()
{
    $('#lightright').css ("left", "100%");
    $('#lightright').animate({left:'0%'},1500, "", animateRight);
}

function animateLeft ()
{
    $('#lightleft').css ("right", "100%");
    $('#lightleft').animate({right:'0%'},1600, animateLeft);
}

Básicamente, simplemente restablecemos la propiedad css animada y comenzamos el efecto de animación, la duración de la animación es más rápida en este código solo para ayudar a ver el efecto.

Espero que te ayude

3
albertein 17 jun. 2009 a las 15:35

¿Estás tratando de implementar paralaje en tu página? Hay un par de complementos para manejar esto.

http://plugins.jquery.com/project/jparallax http://plugins.jquery.com/project/jquery-parallax http://en.wikipedia.org/wiki/Parallax

1
micmcg 16 jun. 2009 a las 02:39

Puede buscar el uso del complemento jQuery marquee:

http://remysharp.com/demo/marquee.html
http://remysharp.com/2008/09/10/the -silky-smooth-marquee /

2
Dan Herbert 15 jun. 2009 a las 22:38