代码之家 › 专栏 › 技术社区 › Brandon Wang

如何使一个DIV无限运动?

html css jquery javascript

Brandon Wang · 技术社区 · 15 年前

我正在尝试制作一个网页,它使用一个缓慢向左移动的移动分区。还有另一个DIV在其顶部向右移动,产生3D效果(但它在点的旁边)。

我现在要做的是创建一个7000px宽的DIV,它慢慢向左移动(用jquery设置CSS的“right”属性的动画 animate() ,但在所有的移动之后,动画就结束了。

有没有一种方法可以让DIV无限宽,或者至少让它回到开始(就像杂货店收银台的活动皮带一样),这样动画就不会停止?

我认为这需要一些单独的划分,每一个划分一旦到达它的结尾,就会返回,但是我不知道如何做,因为我是一个初学者jquery开发人员。

3 回复 | 直到 15 年前

albertein 15 年前

更新

考虑到你在 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属性并开始去动画效果,动画持续时间更快,在这段代码中只是为了帮助查看效果。

希望它能帮助你