Web Page Animation

11. Reversing Direction

So far once the move link has been selected once and the object moved to a new location, further selection of the move link has no effect. In this tutorial we are going to amend the script so that selecting the link again will move the object back to its original position.

Here we add a startPos variable to go with our endPos variable so that we can swap them over after the move in order to move back. We also adjust the alignment of the end position so that it is an even number of pixels offset from the start position. The endPos -= (endPos-startPos) % 2; calculation will subtract one from the end position if the distance is an odd number and leave it alone if it is even. Since we are moving the object by two pixels each time this will remove the possibility of the object going one pixel past the end position and getting stuck where it ends up moving constantly from one side of the destination to the other without ever reaching it.

The moveit function remains unchanged but we need to amend the mover function to handle movement in both directions.

The first if statement handles the movement from the original start position to the end position as before. The second if statement similarly handles movement in the opposite direction. When the object finishes moving to the end position then neither of these conditions is satisfied and the code swaps the start and end positions around ready to move in the opposite direction the next time the link is selected.