jQuery Queue Demo

1. Click here to start non-stop animation.
By clickin on this link, you will start animation where the box will move 500 pixels on right, 500 pixels down, 500 pixels left and 500 pixels top to come back to the original position.

2. Stop Animation using Queue
Notice how the currently played animation finishes but the subsequent queued animations won't run. Also notice how the queue length goes to zero once you click on this link.

3. Stop Animation using 'stop' method.
Notice how the currently played animation stops right away, but the next queued animation starts. Also notice how the queue length doesn't become zero and the next animation starts.

4. Add reduce height animation to current queue.
If you click on this link, an animation to change background color will be added at the end of the queue. So when the box returns to its original position, its height will reduce by 25 pixels.