Как сделать бесконечное движение div?

Question

Я пытаюсь создать веб-страницу, которая использует движущийся div, который медленно перемещается влево. Существует также еще один div, который перемещается поверх него вправо, что дает 3D-эффект (но это не относится к делу).

То, что я сейчас пытаюсь сделать, сделало div шириной 7000 пикселей, который медленно перемещается влево (анимируя свойство «right» CSS с помощью jQuery animate()), но после того, как все это прошло, анимация заканчивается.

Есть ли способ сделать 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);
}

По сути, мы просто сбрасываем свойство animated 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