Asynchronous grids move

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);  
      }
}

Demo

Asyncronous grid move.

Last updated on Oct.18, 2010
www.pagecolumn.com