Synchronous Statements

First let's go over some basic concept. Javascript statements are executed in the browser line by line. Look at the following 2 lines of statements. They are synchronous, although the 1st line is executed before the 2nd lines.

var a = 5;
var b = 10;

Furthermore, the following 2 setTimeout statements are also synchronous. The expressions var a = 5 and var b = 10 are synchronously registered by setTimeout.

setTimeout("var a = 5", 1000);
setTimeout("var b = 10", 2000);

Now we will use this concept to move the cells in a grid.

Making a grid

Here we use javascript grid framework to build a grid. It's super easy. No need to consider HTML and CSS, just a div tag.

var pggrid = new jsgrid();
pggrid.init({
        id: "wrp",
        rows: 5,
        columns: 5,
        width: 30,
        height: 30,
        center:true,
        backgroundColor: "#cee",
        gutter: 1       
});

The input parameter has told us the scale of the grid. And then we need to create moving divs in each cells of the grid. And push the moving divs into an array grdss.

var grds = pggrid.getgrids();
var grdss = []; 
for (var i=0; i < grds.length; i++) { 
    grds[i].style.position = "relative";
    var div = movingdiv();
    div.innerHTML =i;
    grds[i].appendChild(div);
    grdss.push(div); 
} 

function movingdiv(){
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = pggrid.style.width+"px";
    div.style.height = pggrid.style.height+"px";
    div.style.backgroundColor = "#cc56dd";
    return div;
}

Move the grid

Now let's move the moving divs using our classical script for moving div. We use the for loop to move synchronously the moving divs to the bottom.

In the demo for this script, 8 basic moving directions are presented.

var to = {left:0, top:  pggrid.style.height};

for (var j=0; j < grdss.length; j++) { 

    $(grdss[j]).move({delay:1000,to:to},function(){
         var _this = this;
         setTimeout(function(){
           _this.move({delay:1000,to:{left:0,top:0}});
         },500);
    });

}

However, the effect of this script is not perfect when you look at the demo1. There exists a delay for behind divs. The moving divs actually move not synchronously.

the Revised Script

So I revised our classical script for div move, making it accept an array of div tags, i.e., grid moving divs so that all moving divs syncronously move every step.

if (settings.to.top == _this.start.top) { // x 
        ...
        ...
            for (var i = s; i <= d; i++) { 
              (function(j) { 				    
				    var delay = (descend==true) ? (d-j)*settings.delay/(d - s) : (j-s)*settings.delay/(d - s);
				    
                     ttt[j]  = setTimeout(function() { 
                          for (var h = 0;h < _this.length;h++){  // syncronously  
                          _this[h].style.left = j+"px";   // move every step
                          }                        
                          ...
                          ...                      
                          },delay); 
                })(i); 
            }          
    } 

And we use the script like this,

$(grdss).move({delay:1000,to:to},function(){
      var _this = this;
      setTimeout(function(){
        _this.move({delay:1000,to:{left:0,top:0}});
      },500);
 });

Now the demo is what I expected. The grids move smoothly.

Demo

Syncronous grid move.