I have a simple application where a user clicks on an area, and the counter moves a number of steps. I am using an console-like output window to alert the user of any changes. For moving the counter, I am using a for
loop to run the jQuery animations like so:
function glideMove() {
//for length of moveNum, animate square step
for (var i=1; i <= moveNum; i++) {
$("#thingToAnimate").animate();
}// end for loop
//set squareOn to moveNum
squareOn += moveNum;
}// end glideMove
I call this function from a different number of places in the code, like here:
function moveCounter() {
$("#thingToAnimate").append("Moving... ").scrollTop(BIG_NUMBER);
//if square will be last, finish game
if (squareOn + moveNum>= END_SQUARE) {
finishThis();
} else {
glideMove();
$("#thingToAnimate").append("you are now on square: " + squareOn + ".<\/br >").scrollTop(BIG_NUMBER);//not
//roll again
$("#thingToAnimate").append("Roll again. <br \/>").scrollTop(BIG_NUMBER);
}// end else if
}// end moveCounter
What I want is an alert to the output that the moving animation has begun. Once it has ended, I want an alert to the output that it has finished moving an is ready to continue.
But my problem is, all the alerts to the output run while the animation is still taking place.
What I would like is for the sequence of jQuery animations to run, and have the rest of the program wait on that sequence to complete. This function is called from a number of different places in the code, with different results after the function is complete