如何使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).

我正在尝试创建一个使用移动div的网页,该div慢慢向左移动。还有另一个div在它的顶部向右移动,产生3D效果(但这不是重点)。

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.

我现在要做的是制作一个7000px宽的div,慢慢向左移动(用jQuery animate()动画CSS的“右”属性)但是在它全部移动之后,动画结束。

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?

有没有办法让div无限宽度或至少使它回到开头(就像杂货店结账移动带的东西)所以动画永远不会停止?

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.

我认为这需要一些单独的div,每一个达到它的结束,回去,但我不知道如何做到这一点,因为我是一个初学者jQuery开发人员。

3 个解决方案

#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:

考虑到您在http://nth.brandonwang.org/stuhf2/simpleindex.html上的示例,您可以通过在最后添加回调来修复它,您的脚本必须如下所示:

$(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.

基本上我们只是重置动画css属性并启动de动画效果,此代码中的动画持续时间更快,只是为了帮助看到效果。

Hope that it helps you

希望它能帮到你

#2

You could look into using the jQuery marquee plugin:

你可以考虑使用jQuery marquee插件:

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

#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

#1