цикл анимации

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