[Javascript] end of a function

Dash forgetful54341087097153001984 at hotmail.com
Thu May 12 15:56:42 CDT 2005


hi,

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?

possibilities:

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. 

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

problems:
- i don't have a clue how i could pull either of these off
- deleting a variable that is part of an array does not decrease _array_.length - or at least i dont know how to.
- 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
    - 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 :-(

thanks

Dash

 var animTimer = new Object();
function slideTo(layerID,finalLeft,finalTop){

 eval("clearTimeout(animTimer."+layerID+")"); //incase the animation is restarted half-way through

 var initLeft=parseInt(document.getElementById(layerID).style.left); //find out where
 var initTop=parseInt(document.getElementById(layerID).style.top); //the layer is now

 var newLeft=finalLeft-Math.round(0.68*(finalLeft-initLeft)); //calculate new coords of the element
 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

 document.getElementById(layerID).style.left = newLeft; //move the layer to its calculated coords
 document.getElementById(layerID).style.top = newTop;

 if((newLeft==initLeft) && (newLeft!=finalLeft)){
  moveTo(layerID,finalLeft,initTop);  //if its not going to be moved but is not at its final destination, put it there
  }

 if((newTop==initTop) && (newTop!=finalTop)){
  moveTo(layerID,initLeft,finalTop)  //same again but for y coord
 }

 if((finalLeft!=initLeft) || (finalTop!=initTop)){
  eval("animTimer."+layerID+'=setTimeout("slideTo('+"'"+layerID+"',"+finalLeft+","+finalTop+')"'+",30)"); //recall function if it's not at it's final destination
  }
}
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050512/e543d8a1/attachment.htm>


More information about the Javascript mailing list