Question

所以基本上我有这个JQuery代码（见下文）。目前动画在9秒后播放一次，但我希望它播放3次，在这3次内应该有延迟。有人可以帮助我，因为我是JQuery的新手吗？谢谢！

<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'
        });
        }, 9 * 1000);
  });
    })(jQuery);
</script>

Answer 1

在确定的时间间隔/延迟后调用setInterval()而不是setTimeout来重复执行回调函数。

使用setInterval()

重复调用相同函数的简单示例

JS代码：

  var loop = 0;
var id = setInterval(function() {
  loop++;
  if(loop === 3)
  {
    clearInterval(id);
  }
  alert(" loop: "+loop);
}, 1000);

现场演示@ JSFiddle：http://jsfiddle.net/dreamweiver/Svx3n/112/

注意：请记住在不需要时清除setInterval（），因为它可能会导致异常行为。可能会减慢javascript引擎。

Answer 2

你可以这样解决：首先在函数中包装所有动画。然后在文件准备就绪，请致电：

yourFunctionWithAllAnimations()
            for (var i = 0; i < 2; i++) {
            setTimeout(function() { yourFunctionWithAllAnimations() },3000)
        }

第一次通话没有延迟，接下来的两次通话延迟时间为3000ms = 3秒

Answer 3

这个答案在某种程度上是 @dweweiver 的扩展版本：

  var ratio = 0.5;
  var arr = $('.sameclass').map(function(){ return this.id; }).get();
  var loop = 0;
  var id = setInterval(function() {
    $('#'+arr[loop]).splitFlap({ // select the id in the arr here.
        charWidth:  25 * ratio,
        charHeight: 50 * ratio,
        imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
    });
    loop++; // increment the loop value here
    if(loop === 3){
      clearInterval(id);
    }
    }, 9 * 1000);

我想建议你只是将同一个类放到你想要 splitFlap 的所有div中，并将当前的类名改为ids，如下所示：

<div class='sameclass' id='resized-splitflap'></div>
<div class='sameclass' id='resized-newyork'></div>
<div class='sameclass' id='resized-dublin'></div>

然后您可以按照我在var arr中的建议将它们放入数组中。然后，您可以使用上面的setInterval。

如何重复jquery动画？

3 个答案: