LoginSignup
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-27

概要

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 すぐ見るよう

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
9