Question

我正在尝试使用velocity.js创建一个顺序动画，它会循环3次并停止。

在下面的例子中，我已经将嵌套函数排队，以便一个接一个地创建一个序列。然后尝试使用'for循环'循环该函数3次，但它只运行一次。

我应该提到我刚刚开始学习javascript。我已选择使用velocity.js作为网络动画，以替代使用Flash进行横幅等。

到目前为止的错误代码：

var i = 0;
var loopNo = 3;

function anim8() {
$( "#logo" )
  .velocity( { width: "260px", opacity: 1, left: "20px", top: "80px" }, { delay: 0, duration: 1000 } )
  .velocity("fadeOut", { delay: 1000, duration: 1000 })
  .queue(function() {
    $( ".copy" )
    .velocity({opacity: 1, translateX: "300px"},{duration: 1000})
    .velocity("fadeOut", { delay: 1000, duration: 1000})
    .queue(function() {
       $( "#img" )
      .velocity({opacity: 1, translateY: "300px"},{duration: 1000});
       $( ".outro" )
       .velocity({opacity: 1, translateX: "-190px"},{duration: 1000});
       $( ".button" )
       .velocity({opacity: 1, translateY: "-70px"},{duration: 1000});
    });
  });
}

$(document).ready(function(){
  for (i = 1; i < loopNo; i++) { anim8 (); }
});

我确信答案对某人来说是显而易见的，但却花了几个小时没有进步。如果你能解释一下循环嵌套序列动画的正确方法，那就太棒了！

现场演示： JS-BIN

循环jquery动画序列 - velocity.js

0 个答案: