jQuery animation が Promise を使って究極的にひゃっほいできて嬉しい

概要

es6 の async/await を使えば 最近 Promise を返すようになった jQuery に animation と何かと都合がよくかける

周知の事実かもしれないが嬉しいので書く

今まで

 $('.promise').animate({'width': '200px'}, 1000, function(){
    $('.promise').animate({'width': '100px'}, 1000).promise();
 });

とかネストしたり then とったり。

これから

function wide() {
  return $('.promise').animate({'width': '200px'}, 1000).promise();
}

function short() {
  return $('.promise').animate({'width': '100px'}, 1000).promise();
}

async function animate() {
  for(var i=0; i<10; i++) {
    await wide();
    await short();
  }
  console.log('all done')
}
animate();

ウヒョヒョー

ネストもしないし最高。しかも 3.0系からは requestAnimation ベース。
なんて楽な時代になったんだろうか。。。

CodePen すぐ見るよう