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

希望有所帮助！

如何使这个弹跳球动画代码做无限重复？

1 个答案: