[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