Click to See Complete Forum and Search --> : Need Help!


ncrider88
08-22-2005, 07:44 PM
I am working on a site for my High School and i am trying to animate some pictures so when the page loads one picture flys in to the center right then another flys into the center then one more flys in to the center left. so far all i have accomplished is animating one image and i need some help cause i have no clue as to how to animate 3 images one after the other.
heres what i got now

var animateSpeed = 5;
var object = null;
var fX = null;
var fY = null;
var cX = null;
var cY = null;
var dX = null;
var dY = null;
var stepX = null;
var stepY = null;
var slope = null;
function initAnimate(objectID, x, y){
object = document.getElementById(objectID);

fX = x;

fY = y;

cX = object.offsetLeft;
cY = object.offsetTop;
dX = Math.abs(fX-cX);
dY = Math.abs(fY-cY);
if ((dX ==0) || (dY == 0)) slope = 0;

else slope = dY/dX;
if (dX>=dY) {
if (cX<fX) stepX = animateSpeed;
else if (cX>fX) stepX = animateSpeed;
if (cY<fY) stepY = animateSpeed * slope;
else if (cY>fY) stepY= animateSpeed * slope;
}
else if (dX<dY) {
if (cY<fY) stepY= animateSpeed;
else if (cY>fY) stepY=animateSpeed;
if (cX<fX) stepX= animateSpeed/slope;
else if (cX>fX) stepX = animateSpeed/slope;
}
animateObject()
}

function animateObject() {
if ((dX>0) || (dY > 0)) {
object.style.left = Math.round(cX) + 'px';
object.style.top = Math.round(cY) + 'px';
cX = cX + stepX;
cY = cY + stepY;
dX = dX - Math.abs(stepX);
dY = dY - Math.abs(stepY);
setTimeout ('animateObject()',0);
}
else {
object.style.left = fX + 'px';
object.style.top = fY + 'px';

}
return;

}