Анимация цикла

Question

<div class="wrapper">
    <div class="img">image on background</div>
</div>

.wrapper { position: relative; }
.img { position: absolute; left: 0; top: 0; background: url(image.png); }

.img блок должен быть анимированным циклом, он должен перемещаться из левой точки .wrapper вправо и затем обратно.

Пауза должна быть 2 секунды, прежде чем она вернется.

Как я могу это сделать?

Answer 1

Если вы просто хотите, чтобы изображение двигалось вправо и влево по экрану, вы можете использовать animate следующим образом:

$(function(){
    var $image = $('div.img'),
        $wrapper = $image.parent(),
        delay = 1000,
        duration = 4000,
        moveRight = function(){
            $image.delay(delay).animate({
                left: $wrapper.width() - $image.width()
            }, {
                duration: duration,
                complete: moveLeft
            });
        },
        moveLeft = function(){
            $image.delay(delay).animate({
                left: 0
            }, {
                duration: duration,
                complete: moveRight
            });
        };

    moveRight();
});