CODEWITHSUNDEEP
javascriptjquerycsshtml
Brandon Wang
Brandon Wang

Reputation: 3931

How to make infinite movement of a div?

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.

Upvotes: 3

Views: 4660

Answers (3)

albertein
albertein

Reputation: 27118

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

Upvotes: 3

micmcg
micmcg

Reputation: 2390

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

Upvotes: 1

Dan Herbert
Dan Herbert

Reputation: 103417

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/

Upvotes: 2

Related Questions