如何让一个div无限移动？

Question

我正在尝试制作一个网页，它使用一个缓慢向左移动的div。还有另一个div在它的上方向右移动，提供3D效果(但这不是重点)。

我现在尝试做的是制作一个7000px宽的div，慢慢向左移动(用jQuery animate()动画CSS的" right“属性)，但在它移动之后，动画就结束了。

有没有办法让div变得无限宽，或者至少让它回到开头(就像杂货店结账的移动皮带一样)，这样动画就永远不会停止？

我认为这需要几个独立的div，每个div在结束时都会返回，但我不知道如何做到这一点，因为我是一个初学者jQuery开发人员。

Answer 1

更新

考虑到你在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);
}

基本上，我们只需重置动画css属性并开始动画效果，动画持续时间在此代码中更快，只是为了帮助查看效果。

希望能对你有所帮助

Answer 2

您可以尝试使用jQuery marquee插件：

http://remysharp.com/demo/marquee.html

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

Answer 3

你想在你的页面中实现视差吗？有几个插件可以处理这个问题。

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