循环动画

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