Asynchronous grid move is an effect that one grid starts to move after completion of another grid. If there're only 2 grids, you can use callback function to start the action of the next grid cell. But for a number of grid cells, it's more reasonable to use for loop and setTimeout method.
In the same way, we create a grid as what we did for syncronous grids move. The iteration looks like below. Note the delay span is different for different grid cells. The later, the longer.
function go(){ var delay = 200 for (var i = 0 ;i < grdss.length;i++){ (function(j) { setTimeout(function(){ if (j==0) { to = getdir(ii); t = setTimeout(go,delay*grdss.length*2+delay); } $(grdss[j]).move({delay:delay,to:to},function(){ ii++; if (ii==dirs.length) ii=0; if (j==grdss.length-1) { for (var c = grdss.length - 1;c>-1;c--){ (function(jj) { setTimeout(function(){ $(grdss[jj]).move({delay:delay,to:{left:0,top:0}},function(){ jj = jj-1; }); },delay*(grdss.length -jj)); }) (c); } } }); },delay*j); })(i); } }
More coming soon