CODEWITHSUNDEEP
javascriptjquerycss
Li Wen
Li Wen

Reputation: 43

How can I make this bouncing ball animation code do infinity repeat?

I wanna use this code link:http://codepen.io/kindofone/pen/scuwD but How can I make the animation repeat again and again.

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

this is the link for the code http://codepen.io/kindofone/pen/scuwD

I wanna use this code but How can I make the animation repeat again and again.

Thanks ahead:)

Upvotes: 1

Views: 332

Answers (1)

ak_
ak_

Reputation: 2815

You can loop it by adding a callback to the last animation, which happens on line 118. The callback needs to reset it, and restart everything.

Line 118 Update:

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

Updated codepen: http://codepen.io/anon/pen/grYzPG?editors=0010

Hope that helps!

Upvotes: 1

Related Questions