How to make infinite movement of a div?

Question

I am trying to make a webpage that uses a moving div that slowly moves to the left. There is also another div that moves on top of it to the right that gives a 3D effect (but that's beside the point).

What I am trying to do right now has made a 7000px wide div that slowly moves to the left (animating the "right" property of CSS with jQuery animate()), but after it's all moved by, the animation ends.

Is there a way to make the div an infinite width or at least cause it to go back to the beginning (much like a grocery store checkout moving belt thing) so the animation never stops?

I am thinking this requires a few seperate divs, each once it reaches its end, goes back, but I can't figure out how to do that as I am a beginner jQuery developer.

Answer 1

UPDATE

Taking in account your example at http://nth.brandonwang.org/stuhf2/simpleindex.html you can fix it just by adding a callback at the end, your script must be like this:

$(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 de animation effect, the animation duration is faster in this code just to help to see the effect.

Hope that it helps you

Answer 2

You could look into using the jQuery marquee plugin:

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

Answer 3

Are you trying to implement parallax in your page? There are a couple of plugins for handling this.

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