How to make infinite div movement?

Question

I am trying to create a webpage that uses a moving div that moves slowly to the left. There is also another div that moves over it to the right, which gives a 3D effect (but this does not apply to the point).

What I'm trying to do right now is a 7000px div that moves slowly to the left (animating the “right” CSS property using jQuery animate()), but after everything moves, the animation ends.

Is there a way to make a div infinite width, or at least make it go back to the beginning (just like a grocery store tracking thing) so that the animation never stops?

I think this requires several separate divs, each time it reaches its end, it returns, but I cannot figure out how to do this, since I am a novice jQuery developer.

Answer 1

UPDATE

Given your example at http://nth.brandonwang.org/stuhf2/simpleindex.html , you can fix it by simply adding a callback at the end, your script should be as follows:

$(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);
}

Basically, we just reset the animated css property and start the animation effect, the duration of the animation in this code is faster to help see the effect.

Hope this helps you

Answer 2

jQuery marquee:

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

Answer 3

Are you trying to implement parallax on your page? There are several plugins for this.

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