jquery - 循环动画

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 block 必须是循环动画，它应该从 .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();
});