Cycle animation

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 must be cycle animated, it should travel from left point of .wrapper to right and then back.

There should be 2 seconds pause, before it will travel back.

How can I do this?

Answer 1

If you just want an image moving right and left across the screen, you can use animate like this:

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