循环动画

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