Jquery 动画队列无法按预期工作答案

【问题标题】：Jquery animation queue does not work as expectedJquery 动画队列无法按预期工作
【发布时间】：2013-11-30 23:25:06
【问题描述】：

我想为四个元素创建一个交错动画，所以我首先将四个动画添加到自定义队列中，然后我使用出队。但是，结果是只有最后一个元素是动画的。任何想法出了什么问题？谢谢！

<html>
  <head>
    <style type="text/css">
      div span {position:absolute;}
    </style>
    <script src="jquery-2.0.3.min.js"></script>
    <script src="jquery.lettering-0.6.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("div").lettering();
        var myQueue = $({});
        var nodes = $("div").children();
        for (var i=0; i<nodes.length; i++) {
          var currentNode = $(nodes[i]);
          var animateOptions = {};
          animateOptions['top'] = (i+1)*20;
          animateOptions['left'] = (i+1)*20;
          animateOptions['opacity'] = 0.3;
          animateOptions['queue'] = false;
          animateOptions['duration'] = 1000;
          //currentNode.animate(animateOptions); // if a uncomment this line, all letters are animated, but simultaneously, which I don't want
          myQueue.queue('custom', function(next) {
            currentNode.animate(animateOptions);
            next();
          });
        };
        myQueue.dequeue('custom');
      });
    </script>
  </head>
  <body>
    <div>Test</div>
  </body>
</html>

【问题讨论】：

标签： javascript jquery animation queue

【解决方案1】：

这里发生了什么，虽然队列中有 4 个不同版本的 animateOptions，但每个 animateOptions 只有一个版本的 i，这是 i 的最后一个值。
这就是为什么它只为最后一个字符设置一次动画。
不知道你说的交错动作是什么意思，你必须引入多个循环才能获得想要的效果，或者将动作组排序在一个数组中然后出列。

$(document).ready(function(){
   $("div").lettering();
   var myQueue = $({});
   var fruits = [];
   var nodes = $("div").children();
   var i=0;
   var intervalId = setInterval(function(){
      var currentNode = $(nodes[i]);
      var animateOptions = {};
      animateOptions['top'] = (i+1)*20;
      animateOptions['left'] = (i+1)*20;
      animateOptions['opacity'] = 0.3;
      animateOptions['queue'] = false;
      animateOptions['duration'] = 1000;
      currentNode.animate(animateOptions);
      if(i>=nodes.length)
         clearInterval(intervalId);
      i++;
   },500);
});

【讨论】：

谢谢！但是，我还不清楚正确的解决方案是什么样的。我想要实现的是首先动画“T”，完成后，“e”等。所以应该有四个动画连续运行而不是同时运行。我该怎么做？
您必须间隔调用该方法，我将代码编辑到我的帖子中。希望这会有所帮助
您的代码符合我的预期。有趣的是，它根本不使用队列。我不清楚为什么在这里使用队列不起作用，但您提供了一个可行的解决方案，非常感谢！