Now we have a simple script for div move. Here we will use the callback feature to extend move method to design a bouncing effect. At the moment we only study the bouncing effect in horizontal and vertical direction because these are the most we're likely to use.
Before we start, we need add one statement in div move method in order to calculate the speed of the div move.
_this.speed = (d -s)/settings.delay;
The following function will be used to decide number of bounce to be executed.
function fun(x,n) {
if (x>n) return 0;
else
return 1;
}
One more parameter is needed to tell the bounce object how to bounce.
var bounce = {
length:xxx,
no: xxx
}
length - the maximun length to bounce
no - how many times to bounce (Max 4 times for this code)
$.start = {};
$.bounceX= function(settings,bounce,callbk) {
var target = settings.to.left;var b = bounce.length;var n = bounce.no;
if (parseInt(this.style.left)==target) return;
this.move(settings,function() {
var fh = (this.start.left - settings.to.left)/Math.abs(this.start.left - settings.to.left);
settings.to.left = target+b*fh*fun(1,n);
settings.delay = Math.abs((parseInt(this.style.left) - settings.to.left))/this.speed*1.2;
if (n<2) return;
this.move(settings,function() {
var fh = (this.start.left - settings.to.left)/Math.abs(this.start.left - settings.to.left);
settings.to.left = parseInt(this.style.left)+b*fh*0.5*fun(2,n);
if (n<3) return;
settings.delay = Math.abs(parseInt(this.style.left) - settings.to.left)/this.speed*1.5;
this.move(settings,function(){
if (n<4) return;
settings.to.left = target;
settings.delay = Math.abs(parseInt(this.style.left) - settings.to.left)/this.speed*2;
this.move(settings);
});
});
});
};
$("box0").bounceX({delay:1000,to:{left:0,top:180}},{length:50,no:4});
Just tell delay time, and the destination coordinate.
$.bounceY= function(settings,bounce,callbk) {
var target = settings.to.top;var b = bounce.length;var n = bounce.no;
if (parseInt(this.style.top)==target) return;
this.move(settings,function() {
var fh = (this.start.top - settings.to.top)/Math.abs(this.start.top - settings.to.top);
settings.to.top = target+b*fh*fun(1,n);
settings.delay = Math.abs((parseInt(this.style.top) - settings.to.top))/this.speed*1.2;
if (n<2) return;
this.move(settings,function() {
var fh = (this.start.top - settings.to.top)/Math.abs(this.start.top - settings.to.top);
settings.to.top = parseInt(this.style.top)+b*fh*0.5*fun(2,n);
if (n<3) return;
settings.delay = Math.abs(parseInt(this.style.top) - settings.to.top)/this.speed*1.5;
this.move(settings,function(){
if (n<4) return;
settings.to.top = target;
settings.delay = Math.abs(parseInt(this.style.top) - settings.to.top)/this.speed*2;
this.move(settings);
});
});
});
};
$("box1").bounceY({delay:1000,to:{left:400,top:580}},{length:40,no:4});
In fact, the code of bounceX and bounceY can be easily integrated to bounce.
$.bounce= function(settings,bounce,callbk) {
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) {
var pos = "left";
}
else if (settings.to.left == this.start.left) {
var pos = "top";
}
var _this = this;
(function(pos) {
var target = settings.to[pos];var b = bounce.length;var n = bounce.no;
if (parseInt(_this.style[pos])==target) return;
_this.move(settings,function() {
var fh = (_this.start[pos] - settings.to[pos])/Math.abs(_this.start[pos] - settings.to[pos]);
settings.to[pos] = target+b*fh*fun(1,n);
settings.delay = Math.abs((parseInt(_this.style[pos]) - settings.to[pos]))/_this.speed*1.2;
if (n<2) return;
_this.move(settings,function() {
var fh = (_this.start[pos] - settings.to[pos])/Math.abs(_this.start[pos] - settings.to[pos]);
settings.to[pos] = parseInt(_this.style[pos])+b*fh*0.5*fun(2,n);
if (n<3) return;
settings.delay = Math.abs(parseInt(_this.style[pos]) - settings.to[pos])/_this.speed*1.5;
_this.move(settings,function(){
if (n<4) return;
settings.to[pos] = target;
settings.delay = Math.abs(parseInt(_this.style[pos]) - settings.to[pos])/_this.speed*2;
_this.move(settings);
});
});
});
})(pos)
};