修改

Question

我有这个代码，我从Github得到的，它现在做的是它调用函数一次然后停止但是我希望它重复自己3次，并且在那3次之内想要它有10秒的延迟。

我尝试使用setInterval但它没有用。当我尝试将setInterval插入代码时，第二次尝试执行动画时它无法正常工作。你能帮我解决一下吗？

的链接

HTML code：

<div class="resized-splitflap sixthAnimation">  London  </div>
<div class="resized-newyork sixthAnimation"> New York </div>
<div class="resized-dublin sixthAnimation">  Dublin  </div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
 (function ($) {
$(document).ready(function () {
    window.setTimeout(function(){
        var ratio = 0.5;
        $('.resized-splitflap').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });

            $('.resized-newyork').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });
                    $('.resized-dublin').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });
        }, 1 * 1000);
  });
    })(jQuery);
    </script>

Answer 1

使用onComplete事件，您可以：

    var ratio = 0.3;
    $('.resized-splitflap').splitFlap({
        charWidth:  25 * ratio,
        charHeight: 50 * ratio,
        imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px',
        onComplete: function() {

           $('.resized-newyork').splitFlap({
              charWidth:  25 * ratio,
              charHeight: 50 * ratio,
              imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px',
              onComplete:function() {

                $('.resized-dublin').splitFlap({
                     charWidth:  25 * ratio,
                     charHeight: 50 * ratio,
                     imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
                });
               }
           });
        }
   });

这是一个奇怪的嵌套函数代码，但它可以工作。

修改

正如我告诉你的，它有效。看到这个小提琴：

http://jsfiddle.net/pr2amqsp/1/

我该如何重复这个JQuery函数/动画？

1 个答案:

修改