jQuery 循环中的多个对象动画序列

Question

我需要在 for 循环中对不同对象的 jQuery 动画进行排序。

Javascript:

$(document).ready(function(){
$('#o1').click(function() {

  for (var a=0; a<3; a++){
    console.log('a = ' + a);
         // ... some calculations
    animateCard($('#o1'));
    animateCard($('#o2'));
         // ... some calculations
        }
    });
});

// In reality this function will have object and target inputs
function animateCard(card){ 
    if (card.offset().left == 400) card.animate({left: 0}); // move home
    else card.animate({left: 400});
}

HTML:

<div id="o1" class="card green">Click me</div>
<div id="o2" class="card red"></div>

<div id="p1" class="card gray"></div>
<div id="p2" class="card gray"></div>

这是 JSFiddle link： https://jsfiddle.net/fu3mte6u/1/

我明白了：
- 循环开始，
- 对象 1、对象 2、.. 第 n 个对象一起移动到它们的位置
- 直到他们到达他们的第一个目的地，所有的迭代都是循环的（控制台日志显示）

在 JSFiddle 示例中，如果您单击绿色方块 - 动画将开始。并且一招之后就会停止。如果您再次单击绿色矩形，它将执行第二次迭代所需的动画（但所有循环迭代将在此一次移动中再次消失）

想要的结果：
- 迭代一-将object1移动到position1，然后才将object2移动到pos2，然后....第n个到第n个位置
- 迭代 2 - 再次将对象 object1 移动到其他位置，然后移动 object2，然后 .... nth 等等... （不要一起动画，而是一步一步）

对于 JSFiddle 示例，它会像这样 - 第一个绿色矩形向右移动，然后红色矩形向右移动，然后下一次迭代，绿色的回到原来的位置，而不是红色的 returns，第三次迭代时红色会紧跟在绿色的后面。

随着迭代次数、移动对象及其目的地的变化以及在计算之间插入动画，我无法为每个动画编写回调函数（）。队列，据我所知，适用于对一个对象进行动画排序。

那么，也许您可以帮助对循环中多个对象的动画进行排序？

Answer 1

这可以通过在文档上排列动画来完成。

更新代码：

$(document).ready(function () {        
    $('#o1').click(function () {                                    
        for (var a = 1; a <= 3; a++) { //Loop to go through each element
            // ... some calculations
            animateCard($('#o1'));
            // ... even more calculations
            animateCard($('#o2'));
            animateCard($('#o3'));
        }
    });
});

// in reality this function will have object and target inputs
function animateCard(card) {                
        $(document).queue(function () {
                var self = this;
                if (card.offset().left == 400)                  
              card.animate({
                    left: 0
              }, function () { $(self).dequeue(); });
              else
              card.animate({
                left: 400
              }, function () { $(self).dequeue(); }); // move home

            }); 

}

已更新jsFiddle

Answer 2

你可以使用动画队列的promise等待它完成

$(document).ready(function() {
   $('#o1').click(function() {

     for (var a = 0; a < 3; a++) {

       console.log('a = ' + a);

       // ... some calculations
       animateCard($('#o1'));

       // ... more calculations
       $('#o1').promise().done(function() {
         animateCard($('#o2'));
       })

       // ... even more calculations
     }
   });
 });

  // in reality this function will have object and target inputs
 function animateCard(card) {
   return card.animate({
     left: card.offset().left == 400 ? 0 : 400
   }); // move home
 }

.card {
  width: 50px;
  height: 50px;
  position: absolute;
}
#o1 {
  top: 0px;
  left: 0px;
}
#o2 {
  top: 100px;
  left: 0px;
}
#p1 {
  top: 0px;
  left: 400px;
}
#p2 {
  top: 100px;
  left: 400px;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}
.gray {
  background-color: gray;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="o1" class="card green">Click me</div>
<div id="o2" class="card red"></div>

<div id="p1" class="card gray"></div>
<div id="p2" class="card gray"></div>

jQuery 循环中的多个对象动画序列

jQuery multiple objects animation sequence in loop

javascript

queue

jquery

animation

sequence