jQuery multiple objects animation sequence in loop

Question

I need to sequence jQuery animation on different objects in the for loop.

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>

Here is JSFiddle link: https://jsfiddle.net/fu3mte6u/1/

1. I get this:
   • loop is started,
   • object1, object2, .. nth object move all together to theirs positions
   • till they arrive to theirs FIRST destination, ALL iterations are cycled trough (console log shows)

In JSFiddle example if you click on green square - animation will start. And after one move will stop. If you click green rectangle again it will execute desired animation of second iteration (but ALL loop iterations will be gone again in this one move)

2. Desired result:
   • iteration one - move object1 to position1, only then move object2 to pos2, then .... nth to nth position
   • iteration two - again move object object1 to some other position, then move object2, then .... nth and so on... (Do not animate all together, but step by step)

For JSFiddle example it would be like this - first green rectangle moves right, than red one moves right, than comes next iteration, and green one comes back to its original position, than red one returns, and on third iteration red will go right after green one.

As number of iterations, moving objects and their destinations are changing and animation is inserted between calculations I couldn't write callback function() for each animation. Queue, as I understand works for sequencing animations of one object.

So, maybe You can help to sequence animation of multiple objects in the loop ?

Answer 1

This can be done by queuing animations on the document.

Updated code:

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

            }); 

}

Updated jsFiddle

Answer 2

You can use the promise of the animation queue to wait for it to finish

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