Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 139833

How can I make the rest of my JavaScript Program wait on my jQuery animation

$
0
0

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


Viewing all articles
Browse latest Browse all 139833

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>