javascript - 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, .. nth 对象一起移动到它们的位置
   • 直到他们到达第一个目的地，所有迭代都会循环进行(控制台日志显示)

在 JSFiddle 示例中，如果单击绿色方 block - 动画将启动。而一动之后就会停止。如果您再次单击绿色矩形，它将执行第二次迭代所需的动画(但所有循环迭代将在这一举动中再次消失)

期望的结果:

• 迭代一次 - 将对象 1 移动到位置 1，然后将对象 2 移动到位置 2，然后....第 n 到第 n 个位置
• 迭代两次 - 再次将对象 object1 移动到其他位置，然后移动 object2，然后 .... 第 n 个等等...(不要一起制作动画，而是一步一步制作)

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