I have studied 2 kinds of script for div move. One is using constructor class which was used in the demo of div move. Another is using static class which is similar to the script for fadeIn and fadeOut. I prefer the 2nd one because it can be invoked in inline way like jQuery and easy to attach callback function.
Both scripts accept id of a div tag or a DOM element. To active the move, the position attribute must be set either relative or absolute in CSS.
It uses setInerval method. The delay parameter is the time of delay of each step. No callback, here only for div move horizontally and vertically.
function div() {
this.t = 0;
this.start = {};
}
div.prototype = {
move: function(typ) {
if (this.end.left == this.start.left) {
var vtop = parseInt(this.elem.style.top);
var vleft = this.start.left;
vtop += this.step;
if (vtop>this.end.top) {
vtop = this.end.top;
this.elem.style.top=parseInt(vtop)+"px";
this.stop();
}
else
this.elem.style.top=parseInt(vtop)+"px";
}
else if (this.end.top == this.start.top) {
var vleft = parseInt(this.elem.style.left);
var vtop = this.start.top;
vleft += this.step;
if (vleft>this.end.left) {
vleft = this.end.left;
this.elem.style.left=parseInt(vleft)+"px";
this.stop();
}
else
this.elem.style.left=parseInt(vleft)+"px";
}
},
go: function(settings){
if (settings.route=="line") {
for(var i in settings){
this[i] = settings[i];
for(var j in settings[i]){
this[i][j]=settings[i][j];
}
}
}
this.elem = (typeof this.id =="string") ? document.getElementById(this.id) : this.id;
var _move = this.Bind(this.move);
var closure = function(index) {
return function() {
_move(index);
}
};
this.t = setInterval(closure(this.route),this.delay);
},
stop:function(){
if (this.t ==0) return;
clearInterval(this.t);
this.t = 0;
},
Bind: function( Method ){
var _this = this;
return(
function(){
return( Method.apply( _this, arguments ) );
}
);
}
}
It uses setTimeout method. The delay parameter is the time of delay of total steps. It's easy to attch callback function. Div moves horizontally, vertically and diagonally.
function $(id) {
var $ = (typeof id =="string") ? document.getElementById(id) : id;
$.start ={};
$.stop = function(ttt){
for (var i in ttt) {
clearTimeout(ttt[i]);
}
};
$.move = function(settings,callbk) {
var _this = this;
var ttt =[];
var left = getstyle(_this,"left");
var top = getstyle(_this,"top");
_this.start.left = (left=="auto") ? 0 : parseInt(left);
_this.start.top = (top=="auto") ? 0 : parseInt(top);
if (settings.to.top == _this.start.top) { // x
var descend = (settings.to.left>_this.start.left) ? false : true;
var s = Math.min(_this.start.left,settings.to.left);
var d = Math.max(_this.start.left,settings.to.left);
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() {
_this.style.left = j+"px";
if (descend==false&&j==d) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
else if (descend==true&&j== s) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
},delay);
})(i);
}
}
else if (settings.to.left == _this.start.left) { // y
var descend = (settings.to.top>_this.start.top) ? false : true;
var s = Math.min(_this.start.top,settings.to.top);
var d = Math.max(_this.start.top,settings.to.top);
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() {
_this.style.top = j+"px";
if (descend==false&&j==d) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
else if (descend==true&&j== s) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
},delay);
})(i);
}
}
else {
var descend = (settings.to.left>_this.start.left) ? false : true;
var s = Math.min(_this.start.left,settings.to.left);
var d = Math.max(_this.start.left,settings.to.left);
var k = (settings.to.top - _this.start.top)/(settings.to.left - _this.start.left);
var b = settings.to.top - k*settings.to.left;
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() {
_this.style.left = j+"px";
_this.style.top = k*j+b+"px";
if (descend==false&&j==d) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
else if (descend==true&&j== s) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
},delay);
})(i);
}
}
return ttt;
};
return $;
}
The following revised script is for synchronous move of grid divs.
function $(id) {
var $ = (typeof id =="string") ? document.getElementById(id) : id;
$.start ={};
$.stop = function(ttt){
for (var i in ttt) {
clearTimeout(ttt[i]);
}
};
$.move = function(settings,callbk) {
var _this = this;
var ttt =[];
var left = getstyle(_this[0],"left");
var top = getstyle(_this[0],"top");
_this.start.left = (left=="auto") ? 0 : parseInt(left);
_this.start.top = (top=="auto") ? 0 : parseInt(top);
if (settings.to.top == _this.start.top) { // x
var descend = (settings.to.left>_this.start.left) ? false : true;
var s = Math.min(_this.start.left,settings.to.left);
var d = Math.max(_this.start.left,settings.to.left);
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++){
_this[h].style.left = j+"px";
}
if (descend==false&&j==d) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
else if (descend==true&&j== s) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
},delay);
})(i);
}
}
else if (settings.to.left == _this.start.left) { // y
var descend = (settings.to.top>_this.start.top) ? false : true;
var s = Math.min(_this.start.top,settings.to.top);
var d = Math.max(_this.start.top,settings.to.top);
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++){
_this[h].style.top = j+"px";
}
if (descend==false&&j==d) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
else if (descend==true&&j== s) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
},delay);
})(i);
}
}
else {
var descend = (settings.to.left>_this.start.left) ? false : true;
var s = Math.min(_this.start.left,settings.to.left);
var d = Math.max(_this.start.left,settings.to.left);
var k = (settings.to.top - _this.start.top)/(settings.to.left - _this.start.left);
var b = settings.to.top - k*settings.to.left;
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++){
_this[h].style.left = j+"px";
_this[h].style.top = k*j+b+"px";
}
if (descend==false&&j==d) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
else if (descend==true&&j== s) {
_this.stop(ttt);
if ( callbk!=undefined) callbk.call(_this);
}
},delay);
})(i);
}
}
return ttt;
};
return $;
}
Just tell delay time, and the destination coordinate.
$("box").move({delay:1000,to:{left:0,top:10}});
Attach the callback function as the 2nd parameter in the very straight forward way.
$("box").move({delay:1000,to:{left:0,top:10}},function(){
$("box").move({delay:1000,to:{left:30,top:300}},function(){
$("box").move({delay:1000,to:{left:300,top:300}});
});
});