如何使一个div的无限运动？ [英] How to make infinite movement of a div?

问题描述

我试图制作一个使用移动div慢慢移动到左边的网页。还有另一个div在它的顶部移动到右边，给出一个3D效果（但这是在点之外）。

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).

我现在想做什么已经做了一个7000px宽的div，慢慢地向左移动（使用jQuery animate（）来动画CSS的右属性），但是在它被移动之后，动画

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.

有一种方法可以使div的宽度无限，或至少使它回到开始（很像一个杂货店结帐移动皮带的东西）所以动画永远不会停止？

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.

推荐答案

UPDATE

考虑您的示例，请访问 http：//nth.brandonwang。 org / stuhf2 / simpleindex.html 您可以通过在结尾添加回调来修复它，您的脚本必须是这样：

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);
}

基本上我们只是重置动画css属性和启动de动画效果，动画

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.

希望它可以帮助你

这篇关于如何使一个div的无限运动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！