Question

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

<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>

Answer 1

这里发生了什么，虽然队列中有4个不同版本的animateOptions，但每个i只有一个animateOptions版本，这是{的最后一个值{1}}。
这就是为什么它只为一次和最后一个角色制作动画。
我不知道你的动作是什么意思，你必须引入多个循环来获得所需的效果，或者在一个数组中对动作组进行排序，然后将它出列。

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

1 个答案: