循环动画

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