Question

我正在尝试创建一个使用移动div的网页，该div慢慢向左移动。还有另一个div在它上面向右移动，产生3D效果（但这不是重点）。

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

有没有办法让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属性并启动de动画效果，此代码中的动画持续时间更快，只是为了帮助看到效果。

希望它能帮到你

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

如何使div无限运动？

3 个答案: