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

jQuery multiple objects animation sequence in loop

本文关键字：对象 动画 循环 jQuery      更新时间：2024-01-19

我需要对循环中不同对象上的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. 我明白了：
    • 循环开始
    • 对象1，对象2。。第n个对象一起移动到它们的位置
    • 直到它们到达第一个目的地，所有迭代都会循环（控制台日志显示）

在JSFiddle的例子中，如果你点击绿色方块，动画就会开始。一步之后就会停止。如果你再次点击绿色矩形，它将执行第二次迭代所需的动画（但所有循环迭代都将在这一步中再次消失）

  1. 所需结果：
    • 迭代一-将对象1移动到位置1，然后再将对象2移动到位置2，然后。。。。第n个到第n个位置
    • 第二次迭代-再次将对象object1移动到其他位置，然后移动object2，然后。。。。第n个等等（不要一起设置动画，而是循序渐进）

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

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

所以，也许你可以帮助在循环中对多个对象的动画进行排序？

这可以通过对文档上的动画进行排队来完成。

更新代码：

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

您可以使用动画队列的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>

相关文章：