循环中的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 链接： https://jsfiddle.net/fu3mte6u/1/

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

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

1. 期望的结果：
   • 迭代一 - 将 object1 移动到 position1，然后才将 object2 移动到 pos2，然后 .... 第 n 个到第 n 个位置
   • 迭代二 - 再次将对象 object1 移动到其他位置，然后移动 object2，然后 .... nth 等等... （不要一起做动画，一步一步来）

对于 JSFiddle 示例，它将是这样的 - 第一个绿色矩形向右移动，红色矩形向右移动，然后 在下一次迭代中，绿色返回到原来的位置，然后红色返回，在第三次迭代中，红色将紧跟在绿色之后。

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

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

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>