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 = (typeofthis
.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) {
// xvar
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) {
// yvar
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) {
// xvar
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) {
// yvar
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}});
});
});