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/

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

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

期望的结果：
- 迭代一 - 将object1移动到position1，然后将object2移动到pos2，然后.... nth移动到第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>

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

2 个答案: