如何讓這個彈跳球動畫代碼做無限重複？

Question

我想使用此代碼鏈接：http://codepen.io/kindofone/pen/scuwD但我怎樣才能使動畫重複一遍又一遍。

var Bouncer = function(elem) { 
      // init bouncable element and helpers 
      this.$elem = $(elem); 
      this.$ball = $('<div class="ball"></div>'); 
      this.$space = $('<span>&nbsp;</span>'); 
      this.timers = []; 

      // handle in-place editing events 
      this.$elem.on('blur', (function(instance) { 
      return function() { 
       instance.init(); 
       instance.bounce(); 
      }; 
      })(this)); 

這是鏈接的代碼 http://codepen.io/kindofone/pen/scuwD

我想利用這個代碼，但我怎樣才能一次又一次地使動畫重複。提前

謝謝:)

Answer 1

您可以通過添加一個回調到最後的動畫，這恰好在線118回調需要重新設置，並重新啓動一切循環播放。

線118更新：

instance.$ball.fadeOut(1000,function() { 
    instance.reset(); 
    instance.init(); 
    instance.bounce(); 
}); 

更新codepen：http://codepen.io/anon/pen/grYzPG?editors=0010

希望幫助！

Answer 2

你應該能夠循環只是在使用setInterval什麼，那就是像這樣使用

// thing to loop 
function loop() { 
    // stuff to do 
} 

interval = setInterval(loop, 1000) 

第二個參數是環路將採取重複之前，在這種情況下，1秒毫秒的時間。

你可以用clearInterval

clearInterval(interval) 

停止循環在你的情況，你就應該能夠把動畫中環（）函數。