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