You're almost there - just missing an `async`.  But for the sake of completeness, here's a couple different strategies for running jQuery animations in sequence

## Chain animate calls

[`.animate()`][2] will automatically place animations in a queue for each element.  This is set to true by default, but you can override by passing in the option `{ queue: false }` to force subsequent animations to fire immediately.


This example will animate `marginLeft` first, then `marginTop` after:

```js
$("#a")
    .animate({marginLeft: "40px"}, 1000)
    .animate({marginTop: "40px"}, 1000)
```






    $("#a")
      .animate({marginLeft: "40px"}, 1000)
      .animate({marginTop: "40px"}, 1000)



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="a">Hello</div>




## Animate + Queue

As just observed, animations will automatically queue, but if you want to add your own methods to the queue, you can call [`.queue()`][3] to add your own code.  Just make sure to call the `next()` param when you are done to start the next action in the queue.

This example will animate `marginLeft` first, then change the text, then animate `marginTop`:

```js
$("#a")
  .animate({marginLeft: "40px"}, 1000)
  .queue(function(next) {
    $(this).text("Hi");
    next();
  })
  .animate({marginTop: "40px"}, 1000)
```






    $("#a")
      .animate({marginLeft: "40px"}, 1000)
      .queue(function(next) {
        $(this).text("Hi");
        next();
      })
      .animate({marginTop: "40px"}, 1000)



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="a">Hello</div>



## Promises + Async / Await

You can convert animations into a promise by calling `.promise()` and then awaiting the promise.  

**Note**: Just make sure to mark your function as `async` since [await is only valid in async function][1].

This example will animate `marginLeft` first, then change the text, then animate `marginTop`:

```js
async function main() {
  await $("#a").animate({marginLeft: "40px"}, 1000).promise()
  $("#a").text("Hi");
  await $("#a").animate({marginTop: "40px"}, 1000).promise()
}
main()
```





    async function main() {
      await $("#a").animate({marginLeft: "40px"}, 1000).promise()
      $("#a").text("Hi");
      await $("#a").animate({marginTop: "40px"}, 1000).promise()
    }
    main()



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="a">Hello</div>





## jQuery.When()

You can combine **multiple animations** together by calling [`$.when`][4] on multiple deferred elements to step them all at the same time.  That returns a single promise that can be awaited or passed a callback.

This example will complete animations on both elements, then start the next animations:

```js
$.when(
  $("#a").animate({marginLeft: "40px"}, 1000),
  $("#b").animate({marginLeft: "40px"}, 1000),
).then(()=>{
  $("#a").animate({marginTop: "40px"}, 1000);
  $("#b").animate({marginTop: "40px"}, 1000);
})

```





    $.when(
      $("#a").animate({marginLeft: "40px"}, 1000),
      $("#b").animate({marginLeft: "40px"}, 1000),
    ).then(() => {
      $("#a").animate({marginTop: "40px"}, 1000);
      $("#b").animate({marginTop: "40px"}, 1000);
    })



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="a">Hello</div>
    <div id="b">Goodbye</div>



## Further Reading

* [JQuery synchronous animation][5]
* [when is asynchronous and when it's not?][6]
* [Single queue for jQuery animate() elements][7]
* [JS/jQuery: Wait for function with animations to be finished][8]


[1]: https://stackoverflow.com/q/49432579/1366033
[2]: https://api.jquery.com/animate/
[3]: https://api.jquery.com/queue/
[4]: https://api.jquery.com/jquery.when/

[5]: https://stackoverflow.com/q/1594077/1366033
[6]: https://stackoverflow.com/q/8072116/1366033
[7]: https://stackoverflow.com/q/5965371/1366033
[8]: https://stackoverflow.com/q/25383514/1366033

I want to chain Jquery animations and for the sake of readability I'd like to keep my code "vertical" not "horizontal".

Here's what I've done but does not work:

    async function close(id){
        return $(id).slideUp().promise();
    }
    
    async function shrink(id){
        return $(id).animate({width: '50%'}).promise();
    }
    
    [...]
    
    function update(){
        await close("#myDiv");
        await shrink("#myDiv");
        doSomething();
    }

But I get an error: `Syntax Error: await is only valid in async functions [...]`

I know I can chain Jquery animations (`foo().bar()`) or use these functions' callbacks but my question really is about `async/await`

async/await jquery animate

There are a couple options with native node functionality

## A) With the [`fs.promises` API][1]

You can use [destructuring assignment][2] on import to alias `fs.promises` as just `fs`

```js
const { promises: fs } = require("fs");

(async () => {
    try {
        let file1 = await fs.readFile("file1.txt", "utf-8");
        let file2 = await fs.readFile("file2.txt", "utf-8");

    } catch (e) {
        console.log("e", e);
    }
})()
```


## B) With [`util.promisify` API][3]

```js
const fsSync = require("fs");
const {promisify} = require("util")

const fs = {
  readdir: promisify(fsSync.readdir),
  readFile: promisify(fsSync.readFile),
  // etc
};

(async () => {
    try {
        let file1 = await fs.readFile("file1.txt", "utf-8");
        let file2 = await fs.readFile("file2.txt", "utf-8");

    } catch (e) {
        console.log("e", e);
    }
})()
```

### Further Reading

* [How to read file with async/await properly?][4]
* [Using filesystem in node.js with async / await][5]


[1]: https://nodejs.org/api/fs.html#fs_fs_promises_api
[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
[3]: https://nodejs.org/dist/latest-v8.x/docs/api/util.html#util_util_promisify_original
[4]: https://stackoverflow.com/q/46867517/1366033
[5]: https://stackoverflow.com/q/40593875/1366033

I am experimenting with async/await code to read file.
Here's my code:

    var fs = require('fs');

    function readFile(fileName) {
      return new Promise(resolve => {
        //console.log(test);
        fs.readFile(fileName, 'utf8', function (err, data) {
          if (err) throw err;

          console.log(fileName)
          console.log(data)
        })
        resolve();
      });
    }

    async function run() {
      await readFile('file1.txt');
      await readFile('file2.txt');
      readFile('file3.txt');
    }

    run();

But the result is still random. It means file3 sometime read before file2. Where am I doing wrong?