Просто небольшая функция, которую я набрал, которая перемещает DIVs из их текущей точки в целевую точку, с шагом в один пиксель за раз. Я пытался комментировать как можно лучше, но интересующая вас часть находится в примере 1 и примере 2, сразу после [$ (function () { // jquery document.ready ]. Поместите туда свой код проверки границ, а затем выйдите из интервала, если выполнены условия. Требуется jQuery.
Сначала Демо :
http://jsfiddle.net/pnYWY/
Сначала DIVs ...
<style>
.moveDiv {
position:absolute;
left:20px;
top:20px;
width:10px;
height:10px;
background-color:#ccc;
}
.moveDivB {
position:absolute;
left:20px;
top:20px;
width:10px;
height:10px;
background-color:#ccc;
}
</style>
<div class="moveDiv"></div>
<div class="moveDivB"></div>
пример 1) Старт
// first animation (fire right away)
var myVar = setInterval(function(){
$(function() { // jquery document.ready
// returns true if it just took a step
// returns false if the div has arrived
if( !move_div_step(55,25,'.moveDiv') )
{
// arrived...
console.log('arrived');
clearInterval(myVar);
}
});
},50); // set speed here in ms for your delay
пример 2) Отложенный старт
// pause and then fire an animation..
setTimeout(function(){
var myVarB = setInterval(function(){
$(function() { // jquery document.ready
// returns true if it just took a step
// returns false if the div has arrived
if( !move_div_step(25,55,'.moveDivB') )
{
// arrived...
console.log('arrived');
clearInterval(myVarB);
}
});
},50); // set speed here in ms for your delay
},5000);// set speed here for delay before firing
Теперь функция:
function move_div_step(xx,yy,target) // takes one pixel step toward target
{
// using a line algorithm to move a div one step toward a given coordinate.
var div_target = $(target);
// get current x and current y
var x = div_target.position().left; // offset is relative to document; position() is relative to parent;
var y = div_target.position().top;
// if x and y are = to xx and yy (destination), then div has arrived at it's destination.
if(x == xx && y == yy)
return false;
// find the distances travelled
var dx = xx - x;
var dy = yy - y;
// preventing time travel
if(dx < 0) dx *= -1;
if(dy < 0) dy *= -1;
// determine speed of pixel travel...
var sx=1, sy=1;
if(dx > dy) sy = dy/dx;
else if(dy > dx) sx = dx/dy;
// find our one...
if(sx == sy) // both are one..
{
if(x <= xx) // are we going forwards?
{
x++; y++;
}
else // .. we are going backwards.
{
x--; y--;
}
}
else if(sx > sy) // x is the 1
{
if(x <= xx) // are we going forwards..?
x++;
else // or backwards?
x--;
y += sy;
}
else if(sy > sx) // y is the 1 (eg: for every 1 pixel step in the y dir, we take 0.xxx step in the x
{
if(y <= yy) // going forwards?
y++;
else // .. or backwards?
y--;
x += sx;
}
// move the div
div_target.css("left", x);
div_target.css("top", y);
return true;
} // END :: function move_div_step(xx,yy,target)