Jqueryでアニメーションを作る時によく使うテクニック

$(function() {
  //関数をdelay()を作成
  function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  //関数fadeOutBox()を作成
  function fadeOutBox(ms) {
    $("#box").fadeOut(ms);
  }
  
  //アニメーションをまとめる
  async function run() {
    await delay(500);//停止時間：引数で停止時間を設定
    fadeOutBox(1000);//フェードアウト：引数でアニメーション時間を設定
  }

  //実行
  return run();
});

Promiseは非同期処理

resolveはPromiseが成功したときに呼び出す関数

setTimeout(resolve, ms) でms＝ミリ秒後に resolveを呼び出す

delay(ms)はミリ秒後に成功するPromiseを返す

asyncは非同期関数だよーってこと。

awaitはPromiseが解決されるまで関数の実行を一時停止する。

要はdelayが終わるまで（成功するまで）次の処理が発動しなくなる。

約束しようね（Promise）
待ってくれるって（setTimeout）
そしたら呼んでね（resolve）

その約束を何度も使う（async / await）

Jqueryでアニメーションを
作る時によく使うテクニック

setTimeoutがめんどくさい

順番に表示すればいいじゃない