> For the complete documentation index, see [llms.txt](https://antonshevchuk.gitbook.io/jquery-for-beginners/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://antonshevchuk.gitbook.io/jquery-for-beginners/40_animation/queue.md).
# Get in Line...
A few words about how the `animate()` method handles sequencing. Most readers are probably already familiar with setting up sequential animations. For this, we can use method chaining:
```javascript
// find the element we need
$("#box")
// specify what we want to animate
.animate({ left:"-=100" })
// the next animation call is added to the execution queue
.animate({ top:"-=100" })
```
To run animations in parallel, you'll need to make the following change:
```javascript
// find the element we need
$("#box")
// specify what we want to animate
.animate({ left:"+=100" })
// the next animation call will ignore the queue
.animate({ top:"+=100" }, { queue:false })
```
{% hint style="info" %}
Although this particular example is better written as a single `animate()` call:
```javascript
$("#box")
.animate({
left: "+=100",
top: "+=100"
})
```
{% endhint %}
There's also a wonderful function `stop()` that lets you halt the current animation midway and clear the queue if needed. To provide different behaviors, it accepts three parameters:
parameter
purpose
queue
queue name; for working with the animation queue "fx" this parameter is omitted ("fx" is the default queue)
clearQueue
flag to clear the queue
jumpToEnd
apply the animation result, or not
Here's an example that begs for some experimentation:
```javascript
// a very slow example
$("#box")
.animate({ left:"-=100" }, { duration: 10000 })
.animate({ top: "-=100" }, { duration: 10000 })
```
```javascript
// stop the current animation
$("#box").stop();
```
```javascript
// stop the current animation
// and all subsequent ones (clear the queue)
$("#box").stop(true);
```
```javascript
// stop the current animation and all subsequent ones
// but apply the result of the current one
$('#box').stop(true, true);
```
```javascript
// stop only the current animation
// and apply its result
$('#box').stop(false, true);
```
> A note for the future: if you've built a dropdown menu that keeps dropping down and disappearing after you've been playing with the mouse, you need to stick a `stop()` in the event handler.
Let's try it out on a live example:
{% embed url="" %}
By default, all animation on an object goes into the "`fx`" queue, but since version 1.7 you can specify a custom queue:
```javascript
$("#box")
.animate({ "top":"+=100" }, { duration: 10000, queue:"x" }) // build queue X
.dequeue("x") // start queue X
```
```javascript
$("#box").stop("x") // stop the animation in queue X
```
Why would we need a custom queue? For parallelizing animation, of course — so we can start one animation queue and at any other moment start another one. Maybe this was designed with games in mind? But why guess — let's play:
{% embed url="" %}
Open the page and run the script — a game character will appear, and the game is on!
```javascript
$('#player').show()
```
The script with the `keydown` event handler is already running, and you can make Mario run around the page using the arrow keys or the `R`, `D`, `F`, and `G` keys:
```javascript
var $player = $("#player");
$(document).keydown(function(event){
// 37 - `←` | 68 - `d` | left
// 38 - `↑` | 82 - `r` | up
// 39 - `→` | 71 - `g` | right
// 40 - `↓` | 70 - `f` | down
switch (event.keyCode) {
case 37:
case 68:
$player.stop("x", true);
$player.animate({ "left":"-=100" }, { queue:"x" }).dequeue("x");
break;
case 38:
case 82:
$player.stop("y", true);
$player.animate({ "top": "-=100" }, { queue:"y" }).dequeue("y");
break;
case 39:
case 71:
$player.stop("x", true);
$player.animate({ "left":"+=100" }, { queue:"x" }).dequeue("x");
break;
case 40:
case 70:
$player.stop("y", true);
$player.animate({ "top": "+=100" }, { queue:"y" }).dequeue("y");
break;
}
event.stopImmediatePropagation();
})
```
In this example, two queues are used — `x` and `y`, corresponding to the coordinate axes along which we move. When the `←` key is pressed, the `left` value decreases by `100px` in the `x` queue. When `→` is pressed, we clear the `x` queue and increase `left` by `100px`. For movement along the `y` axis, we use the queue of the same name and the `↑` and `↓` keys.
> From this chapter you should have learned that the `WASD` layout has an alternative :)
>
> All rights to Mario belong to [Nintendo](https://www.nintendo.com/), so be careful with him.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://antonshevchuk.gitbook.io/jquery-for-beginners/40_animation/queue.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.