循環動畫

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