<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2627" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial size=2>hi,</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>i have a script which animates a layer to a
given set of coords on the page (below). (it does it in as straight a line
as possible, and slows down the closer it gets to final position.) It can
be used for multiple layers at once. I was trying to come up with a way of
detecting when all layers being animated had arrived at their final
location - ie. a script that constantly checks whether they have or not
- but i cant think of a way of doing it. it has to be a little cleverer
than doing an else statement on the "recall" part if it's to detect
multiple "animation complete" events. does anyone have any
ideas?</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>possibilities:</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>1)create a variable in an array for each animation
that is started. delete the variable for the animation when it finishes. have
the script check for when _array_.length==0. </FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>2)increase the value of a variable by one each time
a new animation is started and decrease it's value by one each time it is
completed</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>problems:</FONT></DIV>
<DIV><FONT face=Arial size=2>- i don't have a clue how i could pull either of
these off</FONT></DIV>
<DIV><FONT face=Arial size=2>- deleting a variable that is part of an array does
not decrease _array_.length - or at least i dont know how to.</FONT></DIV>
<DIV><FONT face=Arial size=2>- the animation is triggerred by a user event, if
they restart it before the animation is finished, neither of these ideas will
ever know when the animation has finished.the same anim will have
started twice, but finished only once</FONT></DIV>
<DIV><FONT face=Arial size=2> - so then i thought how about
something that uses a dynamically assigned variable of an object (like the way
i'm using animTimer object), combined with number 1 above and check for
when it's length is zero, but animTimer.length (or similar) always returns
undefined :-(</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>thanks</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>Dash</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> var animTimer = new Object();<BR>function
slideTo(layerID,finalLeft,finalTop){</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2> eval("clearTimeout(animTimer."+layerID+")"); //incase the
animation is restarted half-way through</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> var
initLeft=parseInt(document.getElementById(layerID).style.left); //find out
where<BR> var
initTop=parseInt(document.getElementById(layerID).style.top); //the layer
is now</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> var
newLeft=finalLeft-Math.round(0.68*(finalLeft-initLeft)); //calculate new
coords of the element<BR> var
newTop=finalTop-Math.round(0.68*(finalTop-initTop)); //it'll move a
percentage of the distance that it currently is from its final
position</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> document.getElementById(layerID).style.left =
newLeft; //move the layer to its calculated coords</FONT></DIV>
<DIV><FONT face=Arial size=2> document.getElementById(layerID).style.top =
newTop;</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> if((newLeft==initLeft) &&
(newLeft!=finalLeft)){<BR> moveTo(layerID,finalLeft,initTop); //if
its not going to be moved but is not at its final destination, put it
there<BR> }</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> if((newTop==initTop) &&
(newTop!=finalTop)){<BR> moveTo(layerID,initLeft,finalTop) //same
again but for y coord<BR> }</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> if((finalLeft!=initLeft) ||
(finalTop!=initTop)){<BR> eval("animTimer."+layerID+'=setTimeout("slideTo('+"'"+layerID+"',"+finalLeft+","+finalTop+')"'+",30)");
//recall function if it's not at it's final
destination<BR> }<BR>}<BR></FONT></DIV></BODY></HTML>