Javascript Jquery动画队列未按预期工作_Javascript_Jquery_Animation_Queue

Javascript Jquery动画队列未按预期工作

javascript jquery animation

Javascript Jquery动画队列未按预期工作,javascript,jquery,animation,queue,Javascript,Jquery,Animation,Queue,我想为四个元素创建一个交错的动画，所以我首先向自定义队列添加四个动画，然后使用“出列”。但是，结果是只有最后一个元素设置了动画。你知道怎么回事吗？谢谢 <html> <head> <style type="text/css"> div span {position:absolute;} </style> <script src="jquery-2.0.3.min.js"></script&g

我想为四个元素创建一个交错的动画，所以我首先向自定义队列添加四个动画，然后使用“出列”。但是，结果是只有最后一个元素设置了动画。你知道怎么回事吗？谢谢

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


div span{位置：绝对；}
$（文档）.ready（函数（）{
$（“div”）。刻字（）；
var myQueue=$（{}）；
变量节点=$（“div”）.children（）；
对于（var i=0；i这里发生的事情，尽管队列中有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”等等。所以应该有四个动画连续运行，而不是同时运行。我该怎么做呢？你必须在一段时间内调用该方法，我在我的帖子中编辑了代码。希望这有助于你的代码实现我的预期。有趣的是，它根本不使用队列。我不清楚为什么在这里使用队列不起作用，但你有pr提供了一个有效的解决方案，非常感谢！